How to add a textField to a specific row inside a table onclick of a button using reactjs & material ui

user_13491402 0
Viewed 1196

I want to add multiple textfield on to a specific row inside a table whenever the specific row add button is clicked, currently I am able to add text field onclick of add button but whenever the add button is clicked the textfield is getting added in every row of the table. Also the add icon needs to be next to the last text field but currently I could only achieve it having it on the 1st text field. Please someone help me out here. Image of what i have achieved so far.Attempted so far image

As you can see I'm trying to add textfields on 1st row ,but it is automatically adding textfields in every row of table.

Working codesandbox: https://codesandbox.io/s/broken-dream-7nncc?file=/src/App.js

material-ui reactjs javascript
3 Answers

you have to handle button click for each row. right now just one state so therefore it is showing in each cell

user_62991680

There are a few ways to do it. A quick way is to (as Muhammad said) handle the button click for each row.

Meaning that you need to pass to the addCustomFile method the row Id and store this in your array.

Then when you map the customRow array in your main TableBody make sure to add the two custom columns only if there is a match between the customRow.rowID and the row ID you are currently rendering.

I`ve modified your sandbox https://codesandbox.io/s/infallible-resonance-qn64l?file=/src/App.js:1807-1820

user_33101340

Maybe give this a try https://www.w3schools.com/code/tryit.asp?filename=GQP3C100TJZH

hopefully it solves what you are looking for, if not please provide me with a bit more detailed issue of what exactly you want

This at the moment just works for one row and maybe for two rows you can try it by adding a it is not exactly a text field area but it should be a similar fix.

user_159809070
Related