how to dynamically set an array object into input field in react

please i am trying to dynamically set array object into input field and send it to the backend. thanks

when i console.log printOut, it return undifined. hi everyone, please i am trying to dynamically set array object into input field and send it to the backend. thanks

hi everyone, please i am trying to dynamically set array object into input field and send it to the backend. thanks

const myArr= [
        {product: 'egg', price: 5, id:1},
        {product: 'cake', price: 3, id:2}
    ]

    const [input, setInput] = useState(myArr)


      const changeHandler = (id) => event => {
        const { name, value } = event.target;
        setInput(input => input.map((el) => el.id === id
          ? {
              ...el,
              [name]: value,
            }
          : el,
        ));
      };

    const submitForm = (e) =>{
        e.preventDefault();
        
        let printOut = input
            
        
        console.log({print:printOut});
        try {
            axios.post('/products/print', printOut)
        } catch (error) {
            console.log(error);
        }
    }

    return (
        <form onSubmit={submitForm}>
            {myArr.map(x=>(
                <div key={x.id}>
                    <input name='product' value= {x.product} onChange={(e) =>changeHandler(x.id)(e)}  />
                    <input name='price' value= {x.price} onChange={(e)=> changeHandler(x.id)(e)} />
                    
                </div>
            ))}
            <input type="submit" value="Submit" />
        </form>
    )

Answer

As we discussed in the chat, there were plenty of issues.

1. handleChange call was not correct. Your onChange event should be onChange={(e) => changeHander(x.id)(e) } . Your changeHandler returns a function. I think it’s called currying but it’s a function returning another function.
2. Your setInput(input => input.map((el) => el.id === id? {...el, [name]: value,} : el,)); is also wrong. input.map will never work as you have set initial state for that as []. Now I don’t know what you will need but, either update initial state to myArray or change setState mapping to myArray like setInput(input => myArray.map((el) => el.id === id? { ...el, [name]: value,} : el,));