Я хочу установить атрибут id для всех кнопок, которые создаются динамически

Question

Я создал динамическую таблицу, которая создается путем извлечения данных из API. Теперь я хочу установить атрибут id для всех кнопок, как -

row-1 userId = {card.user_id} нажмите здесь

Я уже пробовал простую функцию JavaScript. что-то вроде -

<button id="11" onClick=handleClick(this.id)>click here</button>

 handleClick(id){
     console.log(this.id)
 }

Фактический код -

<div className='container-fluid'>
            <hr />
            <table className='table table-striped mt-4'>
                <thead>
                    <tr>
                        <th>User_Id</th>
                        <th>User_Name</th>
                        <th>Email</th>
                        <th></th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {this.state.arr.map((card)=>{
                        return(
                            <tr>
                                <td>{card.user_id}</td>
                                <td>{card.user_name}</td>
                                <td>{card.user_email}</td>
                                <td>
                                    <Link to='/dashboard/users/edit'>
                                    <button onClick={this.goToEdit} 
                                            className="btn btn-outline-primary ml-2 my-2 my-sm-0">Edit</button>     
 // I want to set the user_id to this Edit buttons id attribute
                                    </Link>
                                </td>
                                <td>
                                    <button onClick={this.onDeleteClick} 
                                            className="btn btn-outline-primary ml-2 my-2 my-sm-0">Delete</button>
                                </td>
                            </tr>       
                    ) })}
                </tbody>
             </table>
        </div>

Я хочу сделать что-то вроде этого - https://screenshots.firefox.com/AqTlvJOO6KgD0zG5/mrigank.com

Answer 1

Вы можете передать идентификатор атрибуту значения данного элемента.

Так что вы можете сделать что-то вроде этого:

{this.state.arr.map((card, index) => {
  return(
      <tr>
          <td>{card.user_id}</td>
          <td>{card.user_name}</td>
          <td>{card.user_email}</td>
          <td>
            <Link to='/dashboard/users/edit'>
              <button 
                onClick={this.goToEdit} 
                className="btn btn-outline-primary ml-2 my-2 my-sm-0"
                value={card.user_id}
              >Edit
              </button>     
            </Link>
          </td>
          <td>
              <button 
                 onClick={this.onDeleteClick} 
                 className="btn btn-outline-primary ml-2 my-2 my-sm-0"
                 value={card.user_id}
              >Delete
              </button>
          </td>
      </tr>       
) })}

Тогда onClick, вам просто нужно что-то сделать с этим значением.

Answer 2

Мое предложение будет просто использовать индекс из map и использовать его.Или, если вы хотите установить card.user_id, вы тоже можете это сделать.

<tbody>
                   {this.state.arr.map((card, index)=>{
                        return(
                            <tr>
                                <td>{card.user_id}</td>
                                <td>{card.user_name}</td>
                                <td>{card.user_email}</td>
                                <td>
                                    <Link to='/dashboard/users/edit'>
                                    <button id={card.user_id} onClick={this.goToEdit} 
                                            className="btn btn-outline-primary ml-2 my-2 my-sm-0">Edit</button>     
                                    </Link>
   ....