get values of row-inputs in table React

Question

I have a form that includes a dynamic table (nx2) that has inputs in every row. When I submit the form, I need to save all those inputs' values in an array. It should look something like: [['M',10],['S',10],.......]. I'm not finding a way to achieve this, I've seen I have to differentiate each input but I don't know how to access the value later.

This is my code for the table:

<table class="table-size-qty">
    <thead>
       <tr>
          <th scope="col">Size</th>
          <th scope="col">Qty</th>
       </tr>
       {rows.map((r) => (
          <tr>
             <td><input className="no-style" name={'size'+r} type="text"></input></td>
             <td><input className="no-style" name={'qty'+r} type="number"></input></td>
          </tr>
        ))}
    </thead>
</table>
<button type='button' class="buttonAddRow" onClick={addRow}>Add row</button>

On every click it adds a row trough the addRow() method:

 const addRow = () => {
      setRows([...rows, rows.length]);
 }

Thank you very much in advance!

what do the 'M' and 'S' in [['M',10],['S',10],.......] stand for? — vuongvu
– vuongvu, Commented May 23, 2021 at 8:28
Sorry if I was confusing, it was just an example. The columns are for size and quantity, so the array should have size-qty pairs. 'M' would be a size and 10 the quantity. — pop
– pop, Commented May 23, 2021 at 8:35
not sure if i understand your question correctly, let's try my answer below — vuongvu
– vuongvu, Commented May 23, 2021 at 8:52
oh sorry, just seen this comment. yeah, I think I couldn't express myself correctly. was I better this time? haha — pop
– pop, Commented May 23, 2021 at 9:00
i'll explain it again: I'm working with a marketplace where sellers can upload their clothes. in the clothes' form, there's a table that refers to the size and qty of the product. as I can't know hoy many sizes they have of each product, I decided to implement a dynamic table where they can add as many rows as they want. In this table, they type all the sizes and their corresponding qty in the inputs I was talking about. When they click on "submit product", I need to save all those size-qty values in an array and I don't know how to do that :( — pop
– pop, Commented May 23, 2021 at 9:05

vuongvu · Accepted Answer · 2021-05-23 09:13:24Z

2

I believe when you add a new row, you're supposed to know the new size-qty values:

// newSize, newQty are available
 const addRow = () => {
      setRows([...rows, [newSize, newQty]]);
 }

so the rows state now will have the structure as you expected, you can render it like:

{rows.map(([size, qty]) => (
  <tr>
      <td><input className="no-style" name={`size${size}`} value={size} type="text"></input></td>
      <td><input className="no-style" name={`qty${qty}`} value={qty} type="number"></input></td>
  </tr>
))}

Updated, try the demo below: https://stackblitz.com/edit/react-ebcpff

edited May 23, 2021 at 9:13

answered May 23, 2021 at 8:51

vuongvu

8497 silver badges16 bronze badges

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

4 Comments

pop Over a year ago

Thank you for the answer! But the size-qty values are written in the input after adding the row. And my problem is not much about the rendering part, but rather that I don't know how to save all the input values in an array once I submit the button :)

vuongvu Over a year ago

I don't think it's a good idea to have so many inputs, try to have only 2 inputs for size and qty then click add button to add that into the rows

vuongvu Over a year ago

@pop try the demo attached

pop Over a year ago

aw thank you very much for your time!! different perspective, but I like it even more haha. I'll definitely use that. thanks again, really!!!!

Collectives™ on Stack Overflow

get values of row-inputs in table React

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related