There is a Table component that I want to display in a container component. In the table I transfer the data and icons (edit, delete). Icons are added to each entry in the table.

ID -------- NAME -------- 1 -------- Vasya -------- edite, delete 2 -------- Alex -------- edite, delete

You must somehow associate each icon with a specific ID in the table. When you press the button, the request goes to the server. Such logic should not, in theory, be in the component. But if I create an onClick callback on the icon in the container, it will work for all entries. How to solve this kind of problem?

    2 answers 2

    Suppose you have the editUser(userId) and deleteUser(userId) functions that perform the corresponding requests to the server. Then here’s how to describe the UserRow component representing a row in a table.

     const handleEditClick = userId => { editUser(userId) } const handleDeleteClick = userId => { deleteUser(userId) } const UserRow = props => ( <tr> <td>{props.user.id}</td> <td>{props.user.name}</td> <td onClick={handleEditClick.bind(null, props.user.id)}>edit</td> <td onClick={handleDeleteClick.bind(null, props.user.id)}>delete</td> </tr> );

    accordingly, you can use it like this:

     const UserTable = props => ( <table> <thead> <tr> <th>ID</th> <th>NAME</th> </tr> </thead> <tbody> {props.users.map(user => <UserRow user={user} />)} </tbody> </table> )

    Here is a working example: https://jsfiddle.net/kbpaf9zh/

      In general, you can create such a function in your container:

       onSelectID(ID) { return (event) => { const user = this.userList[ID]; // операции с конкретным user } }

      In the container Render you write something like this:

       render() { const userList = this.userList.map( val => { <UserComponent key={val.ID} user={val} onClick={this.onSelectID(val.ID)} // <- обработчик только для конкретного ID /> } return (userList); }