Button element in array with onClick property to change state the specific button that is clicked

Question

I have an array of button that is rendered using .map to print out the rows in data table. Each row have button that trigger the Edit panel popup. The problem that I currently have is when one button is clicked, the Edit panel on all rows.

The code:

          const [showEdit, setShowEdit] = useState([]);

          <tbody>
            {appSettingsList.map((appSettings, i) => (
              <tr key={i}>
                <td>{appSettings.Name}</td>
                <td>{appSettings.BackgroundColor}</td>
                <td>{appSettings.FontSize}</td>
                <td>{appSettings.FontFamily}</td>
                <td>{appSettings.Theme}</td>
                <td>{appSettings.NavigationBar}</td>
                <td className="action-column">
                  <button
                    key={i}
                    className="button-green"
                    onClick={() => setShowEdit(!showEdit)}
                  >
                    Edit
                  </button>
                </td>
                <td>{showEdit ? <EditApplicationSettings /> : null}</td>
              </tr>
            ))}
          </tbody>

How can I make that each button have different state?

iamhuynq · Accepted Answer · 2022-02-08 10:18:08Z

3

Your state should be index of active row

      const [activeIndex, setActiveIndex] = useState(null);

      <tbody>
        {appSettingsList.map((appSettings, i) => (
          <tr key={i}>
            <td>{appSettings.Name}</td>
            <td>{appSettings.BackgroundColor}</td>
            <td>{appSettings.FontSize}</td>
            <td>{appSettings.FontFamily}</td>
            <td>{appSettings.Theme}</td>
            <td>{appSettings.NavigationBar}</td>
            <td className="action-column">
              <button
                key={i}
                className="button-green"
                onClick={() => setActiveIndex(i)}
              >
                Edit
              </button>
            </td>
            <td>{activeIndex === i ? ( <button key={i} className="button-green" onClick={() => setActiveIndex(null)} > Edit </button> ) : ( <button key={i} className="button-green" onClick={() => setActiveIndex(i)} > Edit </button> )}</td>
          </tr>
        ))}
      </tbody>

edited Feb 8, 2022 at 10:18

answered Feb 8, 2022 at 9:02

iamhuynq

5,5572 gold badges17 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

amh_300 Over a year ago

Thank you for the answer. I have tested it and the onclick does not trigger all rows now. However, by using this method, the state cannot be reverse back by the same onclick event. So i made some changes.

amh_300 Over a year ago

{activeIndex === i ? ( <button key={i} className="button-green" onClick={() => setActiveIndex(!i)} > Edit </button> ) : ( <button key={i} className="button-green" onClick={() => setActiveIndex(i)} > Edit </button> )}

Amila Senadheera · Accepted Answer · 2022-02-08 09:04:50Z

2

You need to handle the edit logic for each row independently.

Create a TableRow component with toggling Edit View logic.

const TableRow = ({ appSettings, i }) => {
    const [showEdit, setShowEdit] = useState([]);

    return (
        <tr key={i}>
            <td>{appSettings.Name}</td>
            <td>{appSettings.BackgroundColor}</td>
            <td>{appSettings.FontSize}</td>
            <td>{appSettings.FontFamily}</td>
            <td>{appSettings.Theme}</td>
            <td>{appSettings.NavigationBar}</td>
            <td className="action-column">
                <button
                    key={i}
                    className="button-green"
                    onClick={() => setShowEdit(!showEdit)}
                >
                    Edit
                </button>
            </td>
            <td>{showEdit ? <EditApplicationSettings /> : null}</td>
        </tr>
    );
};

Iterate over TableRow elements.

<tbody>
    {appSettingsList.map((appSettings, i) => (
        <TableRow appSettings={appSettings} i={i} />
    ))}
</tbody>

answered Feb 8, 2022 at 9:04

Amila Senadheera

13.4k16 gold badges31 silver badges48 bronze badges

2 Comments

Amila Senadheera Over a year ago

@alep, let me know if you have any issues with this solution

amh_300 Over a year ago

Thank you for the answer, I have tested it and it works. Is separating the rows to another component is better code management than the one suggest by @iamhyunq?

Collectives™ on Stack Overflow

Button element in array with onClick property to change state the specific button that is clicked

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related