CODEWITHSUNDEEP
arraysreactjsobjectstate
Arsalan Khattak
Arsalan Khattak

Reputation: 958

How to set state of a specific object in array

I have a list of Objects in Array, which contain user values. I want to change a specific object depending on user choice. To be more specific, I have a Table, for each user, there is a property ischecked which is false on default. I want that when a user clicks on a checkbox, isChecked property changes to true.

Table

Here is my Function which displays the table data.

// Display Table Data
  renderTableData = () => {
    return this.state.students.map((student, index) => {
      const { isChecked, name, age, email } = student; //destructuring
      return (
        <tr className={classes.tableRow} key={index}>
          <td className={classes.tableDataSpecial}>
            <div className={classes.content}>
              {" "}
              <input
                type="checkbox"
                checked={isChecked}
                onChange={this.toggleCheckHandler}
              />
            </div>
          </td>
          <td className={classes.tableData}>{name}</td>
          <td className={classes.tableData}>{age}</td>
          <td className={classes.tableData}>{email}</td>
        </tr>
      );
    });
  };

Here is my State

 state = {

    students: [
      { isChecked: false, name: "Wasif", age: 21, email: "[email protected]" },
      { isChecked: false, name: "Ali", age: 19, email: "[email protected]" },
      { isChecked: false, name: "Saad", age: 16, email: "[email protected]" },
      { isChecked: false, name: "Asad", age: 25, email: "[email protected]" }
    ]
  };

and here is my toggleCheckHandler function

toggleCheckHandler = e => {
    console.log(e.target);
  };

e.target gives me DOM content. So how to target that specific object.

For Example, I want to set isChecked of Wasif to true, how do I do that?

Upvotes: 0

Views: 42

Answers (2)

Elijah Sink
Elijah Sink

Reputation: 98

You could make use of the index parameter of your callback function. This could look something like:

// Display Table Data
  renderTableData = () => {
    return this.state.students.map((student, index) => {
      const { isChecked, name, age, email } = student; //destructuring
      return (
        <tr className={classes.tableRow} key={index}>
          <td className={classes.tableDataSpecial}>
            <div className={classes.content}>
              {" "}
              <input
                type="checkbox"
                checked={isChecked}
                onChange={() => this.toggleCheckHandler(index)}
              />
            </div>
          </td>
          <td className={classes.tableData}>{name}</td>
          <td className={classes.tableData}>{age}</td>
          <td className={classes.tableData}>{email}</td>
        </tr>
      );
    });
  };

toggleCheckHandler = (index) => {
    const students = this.state.students;
    students[index].isChecked = !students[index].isChecked;
    this.setState({
        students: students
    });
};

Upvotes: 2

alexfrize
alexfrize

Reputation: 1102

You can also pass any data related to specific student (whole 'student' object, email, or id of this student). Something like this:

const { isChecked, name, age, email } = student; //destructuring
return (
  ...
  <input
    type="checkbox"
    checked={isChecked}
    onChange={()=>this.toggleCheckHandler(email)}
  />
  ...
)

toggleCheckHandler = email => {
 console.log(email); // or id
};

Then you can easily find an object in array by email (or id).

Upvotes: 0

Related Questions