I have a table inside a functional ponent. Each row in the table has an edit button at the end of the row. When I click an Edit button it applies the changes to all the edit buttons. How do I know which button is clicked and apply changes only to that? (I have a large number of rows so I cannot create a state for each button)

Here is a link to my code

I have a table inside a functional ponent. Each row in the table has an edit button at the end of the row. When I click an Edit button it applies the changes to all the edit buttons. How do I know which button is clicked and apply changes only to that? (I have a large number of rows so I cannot create a state for each button)

Here is a link to my code

• javascript
• reactjs

• Please show the relevant button rendering code in the question itself – charlietfl Commented Jul 11, 2019 at 0:56

4 Answers 4

One way you can do is keep track of row index on the state. For example, provide id to the button, which is equal to index of the row

 <Button id={index} type="button" onClick={e => this.handleEdit(e)}>

and in your handleEdit function

  handleEdit = e => {
    e.preventDefault();
    this.setState({
      showbutton: true,
      showButtonIndex: Number(e.target.id)
    });
  };

This way you have a index of the clicked row in the state and you can change your logic to show your <Edit /> ponent as

{this.state.showbutton && (this.state.showButtonIndex === index) && <Edit />}

I am assuming, you are allowing only one row to edit at a time.

Working code here

I do not understand what the desired behavior of the button is, however, it seems that this is the relevant code for creating the buttons

  handleEdit = (e) => {
    e.preventDefault();
    this.setState({
      showbutton: true
    });
  };
  render() {
    console.log(this.state.names);
    return (
      <div>
        <h2> Names: </h2>
        <Table>
          <thead>
            <tr>
              <th>Name</th>
            </tr>
          </thead>
          {this.state.names.map((name, index) => {
            return (
              <tbody>
                <tr>
                  <td> {name} </td>
                  <td>
                    <Button type="button" onClick={e => this.handleEdit(e)}>
                      Edit
                    </Button>
                  </td>
                  {this.state.showbutton && <Edit />}
                </tr>
              </tbody>
            );
          })}
        </Table>
      </div>
    );
  }

You can see in the this.states.map() function that there is an index parameter that gets bound. You can use this to keep track of which button is calling the function and passing that into the function as such

handleEdit = (e, id) => {
    e.preventDefault();
    console.log(id);
    this.setState({
      showbutton: true
    });
  };
  render() {
    console.log(this.state.names);
    return (
      <div>
        <h2> Names: </h2>
        <Table>
          <thead>
            <tr>
              <th>Name</th>
            </tr>
          </thead>
          {this.state.names.map((name, index) => {
            return (
              <tbody>
                <tr>
                  <td> {name} </td>
                  <td>
                    <Button type="button" onClick={e => this.handleEdit(e, index)}>
                      Edit
                    </Button>
                  </td>
                  {this.state.showbutton && <Edit />}
                </tr>
              </tbody>
            );
          })}
        </Table>
      </div>
    );
  }

The example just prints the id of the button that clicked it. You can utilize this in whatever way necessary to uniquely identify the buttons.

The code is here

I make some changes here

1. Convert the state to an array of objects with showbutton in every id.
2. Change the function to handle extra parameter id

function Lists() {
    const handleClick = (button) => {
        console.log(button.target);
    };

    return (
        <section className={css.actionList}>
            <div className={css.itemActive} onClick={handleClick}>
                Posts
            </div>
            <div className={css.itemActive} onClick={handleClick}>
                Comments
            </div>
            <div className={css.itemActive} onClick={handleClick}>
                Liked Posts
            </div>
        </section>
    );
}

I assume that you won't use props and pass to children elements state of click. Hope it helps