how to sum all input values from forminput? The input field was rendered using map method

Question

I calculated the subtotal with child component by passing the arguments as I could not calculate in the parent component itself. Here I used map method for form input. Now I need to calculate the total of subtotal. if I could get a array of all inputs it would be easy to calculate.

  const [value, setValue] = useState({ qty: 0 })

  const handleInputChange = (e) => {
    e.preventDefault()
    setValue({
      ...value,
      [e.target.name]: e.target.value
    })
  }


  return (
    <div>
      <Table bordered hover>
        <thead>
          <tr>
            <th>PRODUCT NAME</th>
            <th>UNIT</th>
            <th>PRICE</th>
            <th>QUANTITY</th>
            <th>SUB TOTAL</th>
          </tr>
        </thead>
        <tbody>
          {
            ListItems.map((section) =>
              <React.Fragment key={section.id}>
                <tr>
                  <td>{section.name}</td>
                </tr>
                {
                  section.items.map((item) =>
                    <tr key={item.id} >
                      <td>{item.productName}</td>
                      <td>{item.unit}</td>
                      <td>{item.price}</td>
                      <td>
                        <FormElement
                          type="number"
                          name={item.productName}
                          value={value.qty}
                          handleChange={handleInputChange}
                        />
                      </td>
                      <Subtotal class="subtotal" price={item.price} quantity={value[item.productName]} />
                    </tr>
                  )
                }
              </React.Fragment>
            )
          }
        </tbody>
      </Table>
    </div>
  )
}
export default PriceList

this is subtotal component

const Subtotal = ({ price, quantity }) => {
    const subtotal = price * (quantity >= 0 ? quantity : 0)
    console.log(subtotal)
    
    return (
        <td>{subtotal}</td>
    )
}

export default Subtotal

whenever I enter input values everytime subtotal is logged individually.

<img>[![log values][1]][1]


  [1]: https://i.stack.imgur.com/JzwWg.png

Answer 1

In this case you can pass state variable to the children and get it updated over there and get your data back as state variable is updated at child level and then you can simply calculate the sum.

const [value, setValue] = useState({ qty: 0 })
const [subtotals,setSubtotals] = useState({})
  const handleInputChange = (e) => {
    e.preventDefault()
    setValue({
      ...value,
      [e.target.name]: e.target.value
    })
  }


  return (
    <div>
      <Table bordered hover>
        <thead>
          <tr>
            <th>PRODUCT NAME</th>
            <th>UNIT</th>
            <th>PRICE</th>
            <th>QUANTITY</th>
            <th>SUB TOTAL</th>
          </tr>
        </thead>
        <tbody>
          {
            ListItems.map((section) =>
              <React.Fragment key={section.id}>
                <tr>
                  <td>{section.name}</td>
                </tr>
                {
                  section.items.map((item) =>
                    <tr key={item.id} >
                      <td>{item.productName}</td>
                      <td>{item.unit}</td>
                      <td>{item.price}</td>
                      <td>
                        <FormElement
                          type="number"
                          name={item.productName}
                          value={value.qty}
                          handleChange={handleInputChange}
                        />
                      </td>
                      <Subtotal class="subtotal" price={item.price} quantity={value[item.productName] subtotals=subtotals setSubtotals=setSubtotals} />
                    </tr>
                  )
                }
              </React.Fragment>
            )
          }
        </tbody>
      </Table>
    </div>
  )
}
export default PriceList```

and in subtotal components set subtotal using a key and update subtotal value to the subtotal state variable to sum all subtotals just iterate through 'subtotals' keys and sum every value.