How to display data to the inputs when the specific table row is clicked

Question

I am new in React and I would like to know how can I do that When I click the button in a specific row in the table I will get that specific data for that row and get it displayed in the input fields in the same form where you can add that data to the table.

I hope that my question makes sense. Thank you for every answer:)

Answer 1

The way you would do this completely depends on your table component and form handling. Are you using HTML forms and using state to manage your own form? Are you using formik ?. Assuming you're dynamically generating the table rows with plain table components, you could do something like the following to give the button in each row access to the data in the row when clicked.

const data = [
  { name: 'Joe Shmoe', age: 25 },
  { name: 'Sarah Silverman', age: 40 },
  { name: 'Ronald Lee', age: 10 },
];

const Table = () => {
  return (
    <table>
      <tbody>
        {data.map(d => (
          <tr>
            <td>{d.name}</td>
            <td>{d.age}</td>
            <button onClick={() => alert(d)}>Click me</button>
          </tr>
        ))}
      </tbody>
    </table>
  )
};

Answer 2

If you could share your code, I get more understanding of your question. Answer of your question according to my observation:

Make one state that will store your selected row. Set this state with row's data when user click on the button.

And use that state in input's value tag. Like this:

<input value={state.name} ...other_attributes />