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

Question

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 returns undefined.

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>
    )

input is an array but you're trying to access it like an object input.product. — Andy
– Andy, Commented Sep 20, 2021 at 13:55
Your onChange event should be ‘onChange={(e) => changeHander(x.I’d)(e) }’ . Your changeHandler returns a function. I think it’s called currying but it’s a function returning another function. — Sanish Joseph
– Sanish Joseph, Commented Sep 20, 2021 at 14:03
thanks Andy, please how can i access it like an array and again i got an empty data in the database — Yusuf
– Yusuf, Commented Sep 20, 2021 at 14:04
thanks joseph, i have modified it and i still got undefined error — Yusuf
– Yusuf, Commented Sep 20, 2021 at 14:09

Sanish Joseph · Accepted Answer · 2021-09-20 16:44:33Z

1

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

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.
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,));

answered Sep 20, 2021 at 16:44

Sanish Joseph

2,2763 gold badges18 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related