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

score 0 · Answer 1 · answered Jul 10 '23 at 15:59

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.

what I am telling is pass key and subtotals and setsubtoatls to subtotal component using props let the subtotal components add a key and value to the subtotals object and sum all the values present in subtotals object. Do upvote and accept the solution if you find it helpful. — gilf0yle, Jul 11 '23 at 04:11
I have edited and added my subtotal component. can you please tell further steps. — kishore kumar, Jul 11 '23 at 14:05

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

1 Answers1