How can I only manipulate only 1 item in the array map independently

Question

I have created a table like this, and I created all of these buttons in the array map function

Whenever I click on the Edit button in every button, it'll display all of it at the same time

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.

Here is my code, I have shorten it for easier to read:

class RoleManagement extends Component {
    constructor(props) {
        super(props);
        this.state = {
            roleList: [],
            showHideEdit: false,
        };
        this.toggleEdit = this.toggleEdit.bind(this);
    }

    async componentDidMount() {
        await axios.get("http://localhost:3000/admin/get-role-list").then((res) => {
            this.setState({
                roleList: res.data,
            });
        });
    }

/---This is the toggle to display edit
toggleEdit(name) {
        switch (name) {
            case "showHideEdit":
                this.setState({ showHideEdit: !this.state.showHideEdit });
                break;
            default:
                null;
        }
    }

render() {
        const { showHideEdit } = this.state;
        return (
                <table>
                    <thead>
                        <tr>
                            <th>Role ID</th>
                            <th>Role Name</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    {this.state.roleList.map((element, i) => {
                        return (
                            <>
                                <tbody key={i}>
                                    <tr>
                                        <td>{element.role_ID}</td>
                                        <td>{element.rolename}</td>
                                        <td className="admin-button">
/---- The edit button is here
                                            <button
                                                className="admin-config-button"
                                                onClick={() => this.toggleEdit("showHideEdit")}
                                            >
                                                Edit
                                            </button>
                                            {showHideEdit && <RoleEdit id={element.key} />}
                                        </td>
                                    </tr>
                                </tbody>
                            </>
                        );
                    })}
        );
    }
}

Answer 1

Because you are using one boolean to check for all RoleEdit. Show when showHideEdit is true, all RoleEdit will show. To fix, you can update showHideEdit is index of item:

onClick={() => this.toggleEdit(i)}

toggleEdit(i){
  if(this.state.showHideEdit === i) {
    this.setState({ showHideEdit: null});
  } else {
    this.setState({ showHideEdit: i});
  }
}

{showHideEdit === i && <RoleEdit id={element.key} />}