React bind checkboxes with a single button

Viewed 71

I'm trying to create a "Read button" for every checkbox that has been checked, this button simply has to change the color of the entire table row, but i'm unable to do it. These are my components:

import "./App.css";
let eventData = require("./data.json");

export class Events extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        read: false
      };
      this.HandleReadBtn = this.HandleReadBtn.bind(this);
    }
    HandleReadBtn = () => {
      console.log(`clicked ` + this.state.read)
      this.setState(state => ({
        read: !state.read
      }));
    }
    render() {
      return <>
        <HomePageHeader Read={this.HandleReadBtn}/>
          <table>
            <TableHeader />
              <tbody>
                {eventData.map((data, key) => {
                return (
                      <TableBody key={key}
                      dispositivo={data.dispositivo}
                      IMEI={data.IMEI} 
                      evento={data.evento}
                      timestamp= {data.timestamp}/>
                    )
                })}
              </tbody>
          </table>
      </>
    };
};

//my header
class HomePageHeader extends React.Component {
  Read = () =>{
    this.props.Read()
  }
  render() {
    return <header className="header">
    <h2>Events</h2>
    <button onClick={this.Read}>Read</button>
    <button>Assign</button>
  </header>
  };
};

class TableBody extends React.Component {
  checked(event) {
    console.log(event.target.checked, event.target.name);
  }
  render () {
    return <tr>
    <td>
      <input type="checkbox" onChange={this.checked} defaultChecked={false}></input>
    </td>
    <td>
    {/* Owner*/}
    </td>
    <td>
      <h5>{this.props.dispositivo}</h5>
    </td>
    <td>
      <h5>{this.props.IMEI}</h5>
    </td>
    <td>
      <h5>{this.props.evento}</h5>
    </td>
    <td>
      <p>{this.props.timestamp}</p>
    </td>
  </tr>
  };
};

As you can see my checkboxes are dinamically created with {eventData.map((data, key) => {

Thank you in advance to anyone that can help me with that, i searched for something similar but i didn't find anything.

1 Answers

First off, you'll need a "checkedRow" CSS class that applies your desired styling.

You'll want to map the rows with an initial "uncheckedRow" class, then give your checkbox an onclick event that toggles the row's CSS classname between the two options.

Basically, you'll have two sets of CSS rules and you'll just use JS to toggle back and forth between them.

Related