what is the equivelant of this code in class componet? I am able to write this only in react hook (functional component)
setState({ ...allValues, [e.target.name]: e.target.value });
I am able to multiple values passed from multiple forms to this setDataState in functional componet I want the same in class componet but this syntax is not working
currently, I have it written like this. This changes every text field that has changehandler
changeHandler = (e) => {
this.setState({ allValues: e.target.value });
};
entire code
import React from "react";
import moment from "moment";
import axios from "axios";
export default class Addmedicine extends React.Component {
constructor(props) {
super(props);
this.state = { isDone: true, allValues: "" };
this.medicineClose = this.medicineClose.bind(this);
}
medicineClose() {
this.setState({ isDone: false });
}
changeHandler = (e) => {
this.setState({ allValues: e.target.value });
};
submitValue = (e) => {
e.preventDefault();
const formData = new FormData(e.currentTarget);
var object = {};
formData.forEach(function (value, key) {
object[key] = value;
});
var json = JSON.stringify(object);
formData.append("data", json);
const headers = {
Authorization: `token ` + localStorage.getItem("token"),
};
axios
.post(
"posturl",
formData,
{
headers: headers,
}
)
.then(() => {
alert("Medicine was submitted");
})
.catch((error) => {
alert("Cannot add Medicine again");
});
};
render() {
return (
<>
{this.state.isDone ? (
<div style={styles.module}>
<h2 style={{ margin: "0px" }}>Add New Medicine</h2>
<hr style={{ color: "#fff" }} />
<form onSubmit={this.submitValue}>
<table
style={{ borderCollapse: "seperate", borderSpacing: "0em 1em" }}
>
<tr style={styles.tr}>
<td style={styles.tdstyle}>Morning Before Food</td>
<td style={styles.tdstyle}>
<input
type="text"
name="medicationTime"
style={styles.label}
onChange={this.changeHandler}
defaultValue="morning before food"
hidden
/>
<input
type="text"
name="name"
style={styles.label}
onChange={this.changeHandler}
value={this.state.allValues}
/>
</td>
<td style={styles.tdstyle}>
<button type="submit">Add</button>
</td>
</tr>
</table>
</form>
<form onSubmit={this.submitValue}>
<table
style={{ borderCollapse: "seperate", borderSpacing: "0em 1em" }}
>
<tr style={styles.tr}>
<td style={styles.tdstyle}>Morning After Food</td>
<td style={styles.tdstyle}>
<input
type="text"
name="medicationTime"
style={styles.label}
onChange={this.changeHandler}
defaultValue="morning after food"
hidden
/>
<input
type="text"
name="name"
style={styles.label}
onChange={this.changeHandler}
value={this.state.allValues}
/>
</td>
<td style={styles.tdstyle}>
<button type="submit">Add</button>
</td>
</tr>
</table>
</form>
<form onSubmit={this.submitValue}>
<table
style={{ borderCollapse: "seperate", borderSpacing: "0em 1em" }}
>
<tr style={styles.tr}>
<td style={styles.tdstyle}>Afternoon Before Food</td>
<td style={styles.tdstyle}>
<input
type="text"
name="medicationTime"
style={styles.label}
onChange={this.changeHandler}
defaultValue="afternoon before food"
hidden
/>
<input
type="text"
name="name"
style={styles.label}
onChange={this.changeHandler}
value={this.state.allValues}
/>
</td>
<td style={styles.tdstyle}>
<button type="submit">Add</button>
</td>
</tr>
</table>
</form>
<form onSubmit={this.submitValue}>
<table
style={{ borderCollapse: "seperate", borderSpacing: "0em 1em" }}
>
<tr style={styles.tr}>
<td style={styles.tdstyle}>Afternoon After Food</td>
<td style={styles.tdstyle}>
<input
type="text"
name="medicationTime"
style={styles.label}
onChange={this.changeHandler}
defaultValue="afternoon after aood"
hidden
/>
<input
type="text"
name="name"
style={styles.label}
onChange={this.changeHandler}
value={this.state.allValues}
/>
</td>
<td style={styles.tdstyle}>
<button type="submit">Add</button>
</td>
</tr>
</table>
</form>
<form onSubmit={this.submitValue}>
<table
style={{ borderCollapse: "seperate", borderSpacing: "0em 1em" }}
>
<tr style={styles.tr}>
<td style={styles.tdstyle}>Night Before Food</td>
<td style={styles.tdstyle}>
<input
type="text"
name="medicationTime"
style={styles.label}
onChange={this.changeHandler}
defaultValue="night before food"
hidden
/>
<input
type="text"
name="name"
style={styles.label}
onChange={this.changeHandler}
value={this.state.allValues}
/>
</td>
<td style={styles.tdstyle}>
<button type="submit">Add</button>
</td>
</tr>
</table>
</form>
<form onSubmit={this.submitValue}>
<table
style={{ borderCollapse: "seperate", borderSpacing: "0em 1em" }}
>
<tr style={styles.tr}>
<td style={styles.tdstyle}>Night After Food</td>
<td style={styles.tdstyle}>
<input
type="text"
name="medicationTime"
style={styles.label}
onChange={this.changeHandler}
defaultValue="night after food"
hidden
/>
<input
type="text"
name="name"
style={styles.label}
onChange={this.changeHandler}
value={this.state.allValues}
/>
</td>
<td style={styles.tdstyle}>
<button type="submit">Add</button>
</td>
</tr>
</table>
</form>