Create an array of objects from controlled inputs

Question

I have a form with dynamically created inputs. The number of inputs and their name changes depending on fetched data. I'd like to create an array of objects from the values I get from those inputs.

const [form, setForm] = useState([]);
packages = ["250g", "500g"] //This varies depending on fetched data

HTML:

<form onSubmit={(e) => handleSubmit(e)}>
            <ul>
                {packages.map((packageName, index) => {
                    return (
                        <li key={index}>
                            <p>{packageName}</p>
                            <input type="number" min={0} value={form[packageName]} onChange={(e) => handleChange(e, packageName)} />
                            <button type="submit">BUY</button>
                        </li>
                    );
                })}
            </ul>
        </form>

handleChange function:

const handleChange = (e, packageName) => {
    setForm([...form, { [packageName]: parseInt(e.target.value) }]);
};

Current output:

form: [
    {
       "250g": 1
    },
    {
       "250g": 2
    },
    {
       "250g": 3
    },
    {
       "500g": 1
    },
    {
       "500g": 2
    }

]

Every change in input value creates a new object, but I'd like to just change the value in that particular object, that is changed currently.

Desired output:

form: {
    "250g": { quantity: 3 },
    "500g": { quantity: 2 }
}

Your desired output isn’t a valid JS structure. It would be ok if `form` was an object instead of an array. — James, Jul 08 '21 at 11:50
i guess the structure is this? `form: [ { "250g": { quantity: 3 }}, { "500g": { quantity: 2 }}` ] — Apostolos, Jul 08 '21 at 12:01
@MadGrip check my answer. i edited it because i thought form was an array, but i saw the edits :) — Apostolos, Jul 08 '21 at 12:07

score 0 · Accepted Answer · answered Jul 08 '21 at 11:47

0

You can use an object instead of array.

const [form, setForm] = useState({});

const handleChange = (e, packageName) => {
    setForm({
         ...form,
         [packageName]: { quantity: parseInt(e.target.value) }
    });
}

answered Jul 08 '21 at 11:47

TopW3

1,477
1
8
14

Apostolos · Answer 2 · 2021-07-08T12:05:34.630

I'm pasting a vanilla js sample executable.

   let form = {}

function add(str) {
 if (form[str]) {
  form[str].quantity += 1
 } else {
  form[str] = { quantity: 1}
 }
}

add("250g")
add("250g")
add("250g")
add("750g")
add("500g")
add("750g")

console.log(form)

So i guess your method will become like this

const handleChange = (e, packageName) => {
  let newForm = JSON.parse(JSON.stringify(form))
  
     if (newForm[packageName]) {
      newForm[packageName].quantity += parseInt(e.target.value)
       setForm(newForm);
     } else {
            setForm({
         ...form,
         [packageName]: { quantity: parseInt(e.target.value) }
     }  
}

Create an array of objects from controlled inputs

2 Answers2