A product has five different serial number how i add it Mern Stack

JavaScript
1

I want to make book keeping management where has a product lots of quantity and every unit has different identity number or serial number. I want to store products with each identity number or unique number

initialize state

const [sn, setSn] = useState("");

array handle

  const handleChange = (e) => {
const { name, value } = e.target;

setSn((sn) =>
  sn.map((el) => (el.serial !== value ? {...el, [ name]: value } : el))
);

};

Input Body

{sn &&
          sn?.map((el, i) => (
            <>
              <div>
                <div key={i}>
                  <input
                    placeholder="Serial Number"
                    name="serial"
                    value={el?.serial || ""}
                    onChange={(e) => handleChange(e)}
                  />
                  <button onClick={() => addClick()}>Add</button>
                  <button onClick={() => removeClick(i)}>Remove</button>
                </div>
              </div>
            </>
          ))}

Output display

When I try insert new unique number previous number have been changed and all of the number being last entered number

2

This I’m confused about:

setSn((sn) =>
  sn.map((el) => (el.serial !== value ? {...el, [ name]: value } : el))
);

sn is a string (const [sn, setSn] = useState("");). So how are you mapping it?

Putting that aside and ignoring React, can you explain what the data model looks like?

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.