title: How can I only manipulate only 1 item in the array map independently
body: <p>I have created a table like this, and I created all of these buttons in the array map function</p>
  <p><a href="https://i.stack.imgur.com/VkEiH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VkEiH.png" alt="enter image description here" /></a></p>
  <p>Whenever I click on the Edit button in every button, it'll display all of it at the same time</p>
  <p><a href="https://i.stack.imgur.com/qURQu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qURQu.png" alt="enter image description here" /></a></p>
  <p>How can I press Edit, for example, Edit button on RoleID 1, it'll only display the Edit table there for me to edit, not all of it, I don't know how to separate it since it's stuck in the map array I've created.</p>
  <p>Here is my code, I have shorten it for easier to read:</p>
  <pre><code>class RoleManagement extends Component {
      constructor(props) {
          super(props);
          this.state = {
              roleList: [],
              showHideEdit: false,
          };
          this.toggleEdit = this.toggleEdit.bind(this);
      }
  
      async componentDidMount() {
          await axios.get(&quot;http://localhost:3000/admin/get-role-list&quot;).then((res) =&gt; {
              this.setState({
                  roleList: res.data,
              });
          });
      }
  
  /---This is the toggle to display edit
  toggleEdit(name) {
          switch (name) {
              case &quot;showHideEdit&quot;:
                  this.setState({ showHideEdit: !this.state.showHideEdit });
                  break;
              default:
                  null;
          }
      }
  
  render() {
          const { showHideEdit } = this.state;
          return (
                  &lt;table&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;Role ID&lt;/th&gt;
                              &lt;th&gt;Role Name&lt;/th&gt;
                              &lt;th&gt;Action&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      {this.state.roleList.map((element, i) =&gt; {
                          return (
                              &lt;&gt;
                                  &lt;tbody key={i}&gt;
                                      &lt;tr&gt;
                                          &lt;td&gt;{element.role_ID}&lt;/td&gt;
                                          &lt;td&gt;{element.rolename}&lt;/td&gt;
                                          &lt;td className=&quot;admin-button&quot;&gt;
  /---- The edit button is here
                                              &lt;button
                                                  className=&quot;admin-config-button&quot;
                                                  onClick={() =&gt; this.toggleEdit(&quot;showHideEdit&quot;)}
                                              &gt;
                                                  Edit
                                              &lt;/button&gt;
                                              {showHideEdit &amp;&amp; &lt;RoleEdit id={element.key} /&gt;}
                                          &lt;/td&gt;
                                      &lt;/tr&gt;
                                  &lt;/tbody&gt;
                              &lt;/&gt;
                          );
                      })}
          );
      }
  }
  </code></pre>