multiinput from submission in react js - reactjs

Question

I am trying to submit a form in react js I have multiple files
this.state = {
allValues: [],
};
changeHandler = (e) => {
this.setState({ ...this.allValues, [e.target.name]: e.target.value });
};
onsubmbit = (e) => {
e.preventDefault();
console.log(this.state.allValues);
};
<form onSubmit={this.onsubmbit}>
<input type='text' name='bloodsugar' onChange={this.changeHandler} value='' />
<input
type='text'
name='bloodpressure'
onChange={this.changeHandler}
value=''
/>
<button type='submit' style={styles.subbtn}>
Submit
</button>
</form>;
I am trying to submit a form in react js I have multiple files
I am trying to submit this form
console.log(this.state.allValues); when i console log it in submit function i want data as
{
bloodsugar:data of bloodsugar,
bloodpressure:data of bloodsugar,
}
when I console log it in submit function I want data like this

Answer 1

You have to set the value of each input field from the state that you set with changeHandler method. Additionally, you need to update the changeHandler method to update the state.allValues as follows.
(Following is the example code I used to test locally. Do the necessary modifications to fit it to your implementation)
import React, { Component } from "react";
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
allValues: {
bloodsugar: "",
bloodpressure: "",
},
};
}
changeHandler = (e) => {
this.setState({
allValues: { ...this.state.allValues, [e.target.name]: e.target.value },
});
};
onsubmbit = (e) => {
e.preventDefault();
console.log(this.state.allValues);
};
render() {
return (
<form onSubmit={this.onsubmbit}>
<div>
<div style={{ fontSize: "4rem", padding: "15px" }}>
<i className="fa fa-level-up"></i>
</div>
<div style={{ padding: "10px" }}>
<strong>Enter your blood sugar level</strong>
<br />
<input
type="text"
name="bloodsugar"
onChange={this.changeHandler}
value={this.state.allValues.bloodsugar}
/>
</div>
</div>
<div>
<div style={{ fontSize: "4rem", padding: "15px" }}>
<i className="fa fa-area-chart"></i>
</div>
<div style={{ padding: "10px" }}>
<strong>Enter your blood pressure level</strong>
<br />
<input
type="text"
name="bloodpressure"
onChange={this.changeHandler}
value={this.state.allValues.bloodpressure}
/>
</div>
</div>
<button type="submit">Submit</button>
</form>
);
}
}