CODEWITHSUNDEEP
javascriptreactjs
Yusuf
Yusuf

Reputation: 213

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

Upvotes: 1

Views: 2056

Answers (1)

Sanish Joseph
Sanish Joseph

Reputation: 2256

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

Upvotes: 1

Related Questions