How can I handle change in multiple input field and send the data to an api with axios?

Question

I'm trying to handle change in multiple input text field and send the value to an API Here is what i have tried

const [state, setState] = useState({
    Value_A:'', 
    Value_B:'', 
    Value_c:'', 
    Value_D:'', 
    Value_e:''})

The handleChange function right here

function handleChange(evt) {
    const value = evt.target.value;
    setState({
        ...state,
        [evt.target.name]:value
    })
}

So how can I do to get those values inside the function handleSubmit()

const handleSubmit = (e) => {
    const a = {
    // How to get those values here?

Thank you!

Answer 1

The concept you are trying here is known as Controlled Component in reactjs, on every change of input we update the associated state and on form submit we get the updated state. In your case you will get it like:

const handleSubmit = (e) => {
    e.preventDefault();
    let formValues = {...state};  // spread operator is used to clone the data
    // Your API call goes here
}

Controlled Component Reference

Answer 2

Try this.

const handleSubmit = (e) => {
    const a = {...state};
    // Your API call goes here
}