Making multiple inputs with map method in React

Question

enter image description here

Hey, I made multiple inputs with map method and it seemed it worked, but the problem is, when i click left button, the second one also has two rows. what i want is that the second one has one row and only when i click right button, it adds rows thank you so much if you can help me to solve this problem

          {itemState.map((item, index2) => {
                return (
                  <div id="single" key={index2}>
                    <div
                      className="material-symbols-outlined"
                      style={{ fontVariationSettings: "'FILL' 1" }}
                      onClick={addItemCount}
                    >
                      add_box
                    </div>
                    <Form.Group className="mb-3 name">
                      <Form.Label>Name</Form.Label>
                      <Form.Control type="text" />
                    </Form.Group>
                    <div className="lots-quantity">
                      {lotsState.map((items, index3) => {
                        return (
                          <div className="lots" key={index2}>
                            <Form.Group className="mb-3 selection">
                              <Form.Label>items</Form.Label>
                              <Form.Select aria-label="Default select example">
                                <option>Open this select menu</option>
                                <option value="1">One</option>
                                <option value="2">Two</option>
                                <option value="3">Three</option>
                              </Form.Select>
                            </Form.Group>
                            <Form.Group className="mb-3 quantity">
                              <Form.Label>quantity</Form.Label>
                              <Form.Control type="text" />
                            </Form.Group>
                            <div
                              className="material-symbols-outlined"
                              key={index2}
                              style={{ fontVariationSettings: "'FILL' 1" }}
                              onClick={addLotsCount}
                            >
                              add_box
                            </div>
                          </div>
                        );
                      })}

 const [itemState, setItemState] = useState([0]);
  const [lotsState, setLotsState] = useState([0]);

const addItemCount = useCallback(() => {
    let countArr = [...itemState];
    let count = countArr.slice(-1)[0];
    count += 1;
    countArr.push(count);
    setItemState(countArr);
  }, [itemState]);

  const addLotsCount = useCallback(() => {
    let countArr = [...lotsState];
    let count = countArr.slice(-1)[0];
    count += 1;
    countArr.push(count);
    setLotsState(countArr);
  }, [lotsState]);

They are codes i used

Answer 1

It looks like you are using the same state for the "lots" When you add an item it uses the same array to map over for all items. You should use a seperate state for all items. One way of doing that would be like so:

const [lotsState, setLotsState] = useState([[0]]);

In the example I make the lotsState an array of arrays. This way you can add an array to the state per item you add, and use that array for mapping. In the jsx you can then do something like this:

{lotsState[itemIndex].map( ...}

Another way of simplifying this would be to store an object in the itemState that keeps track of the lots per item.

const [itemState, setItemState] = useState([{index: 0, lots: []}]);