Get input data from react.js table loop

Question

I have to change some users point, so in loop how can i take that input value. Without hook

Use state! How can i declare many state. In loop ?

{this.state.data.map((user, index) => (
  <tr key={user.id}>
    <th scope="row" className="text-center">
      {index + 1}
    </th>
    <td id="_lastname">{user.last_name}</td>
    <td id="_firstname">{user.first_name}</td>
    <td className="text-center">{user.category}</td>
    <td className="text-center">
      <input
        type="text"
        placeholder={user.point}
        name="point"
      />
    </td>
    <td className="text-center">
      <button
        name="change"
        value="true"
        onClick={(e) => this.updateHandler(e)}
      >
        <i className="fas fa-check-circle">upd</i>
      </button>
      <button name="delete" value="true">
        <i className="fas fa-times-circle">del</i>
      </button>
    </td>
  </tr>
))}

Please note i just need that input value.

knada · Accepted Answer · 2020-10-08 04:53:04Z

1

You want a dynamic input handler for you inputs. You can have an state field for the input that is an object.

this.state = {
    userPoints: {}
}

Then onChange handler to handle the dynamic inputs

handleDynamicInput = (id, event) => {
    this.setState(prevState => ({
        userPoints: [...prevState.userPoints, {[id]: event.target.value}]
    }))
}

And your input should have the handler bind the user so you can update the state with the userid and userpoint.

<td className="text-center">
    <input
    value={this.state.userPoints[user.id] || ''}
    onChange={this.handleChange.bind(this, user.id)}
    type="text"
    placeholder={user.point}
    name="point"
  />
</td>

You userPoint state field should look like this

userPoints: {
    ...,
    {userId: userPoint},
    ...
}

edited Oct 8, 2020 at 4:53

answered Oct 8, 2020 at 4:02

knada

3441 silver badge5 bronze badges

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

3 Comments

ByamB4 Over a year ago

Yes, thanks for the answer. But i know that, The Problem is i have a multiple <input> then value is can't use one state.

knada Over a year ago

You can have multiple values in your state for each input value

ByamB4 Over a year ago

But my users data is more than 2000 then it's bad practice impossible. How can i declare 2000 for each state :'(

Collectives™ on Stack Overflow

Get input data from react.js table loop

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related