i am working on project which contains more than 200 input fields for list.is it possible to manage them with single state input

import { useState } from "react";
import Item from "../Components/Item";

const initialState={
  input:''
}

const List = () => {
  const [values,setValues]=useState(initialState)

  const handleChange=(e)=>{
    setValues({
      ...values,[e.target.name]:e.target.value
    })
  }

  return (
    <div className="container">
      <div className="listhead">
        <h3 className="text-center">Price List-2022</h3>
        <table className="table table-bordered border-dark table-hover text-center">
          <thead className="bg-success text-white table-bordered border-dark">
            <tr>
              <th>S.No</th>
              <th>Item</th>
              <th>Price</th>
              <th>Qty</th>
              <th>Total</th>
            </tr>
          </thead>
          <Item
            product="bomb"
            name="input"
            price="50"
            value={values.input}
            handleChange={handleChange}
          />
          <Item
            product="chakkar"
            name="input"
            price="100"
            value={values.input}
            handleChange={handleChange}
          />
        </table>
      </div>
    </div>
  );
};
export default List;

child element

const Item = ({name,product,price,value,handleChange}) => {
    return (
    <tbody>
      <tr>
        <th>1</th>
        <th>{product}</th>
        <th>{price}</th>
        <th className="w-25">
          <input
            name={name}
            value={value}
            onChange={handleChange}
            type='number'
          />
        </th>
        <th> </th>
      </tr>
    </tbody>
  );
};
export default Item;

with this code if i enter values in input fields all other input fields reads the same value. if i need to create 200 input field with data, what are the ways to do that?

CodePudding user response：

You can pass all values to item like this :

 <Item
        name="input"
        price="50"
        value={values}
        handleChange={handleChange}
      />

and in Item component set props of input like this :

        <input
            name={name}
            value={values[name]}
            onChange={handleChange}
            type='number'
          />

CodePudding user response：

Your inputs have the same name, if you want to set the state for the different inputs you'll need a unique identifier.

This way you can use the e.target.name as a key in your state object.

<Item
  product="Something"
  name={"unique identifier"}
  price="50"
  value={values["unique identifier"]}
  handleChange={handleChange}
/>

A good practice is also to use the callback function with the useState to make sure you have the most recent values.

setValues((prevValues) => {
  return {
    ...prevValues,
    [e.target.name]: e.target.value,
  };
});
``