hello everyone.i was doing some project and help needed here.
the problem is is there any way to update the this.state.stream depending a change due to the stream variable which is instantiated in the render method before return statement?i do want that because as you can see from the code the stream value depends on the department.so,for example if one person select Chemical Engineering the stream selection would have all the values ["None", "a","b","c","d"] and by default it is None as you can see in the state but if the person changed his mind or realized his selection was wrong and decided to select the stream Software Engineering the stream selection update to contain the values ["None", "p","q","r","s"],but the stream state does not change to None again.if there is any way around this problem give a feedback.thanks in advance.
import React, { Component } from "react";
import { Link } from "react-router-dom";
export default class SignUp extends Component {
constructor(props) {
super(props);
this.state = {
fullName: "",
email: "",
Id: "",
department: "Electrical and Computer Engineering",
stream: "None",
};
this.handleName = this.handleName.bind(this);
this.handleEmail = this.handleEmail.bind(this);
this.handleId = this.handleId.bind(this);
this.handleDep = this.handleDep.bind(this);
this.handleStr = this.handleStr.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleName(e) {
this.setState({
fullName: e.target.value,
});
}
handleEmail(e) {
this.setState({
email: e.target.value,
});
}
handleId(e) {
this.setState({
Id: e.target.value,
});
}
handleDep(e) {
this.setState({
department: e.target.value,
});
}
handleStr(e) {
this.setState({
stream: e.target.value,
});
}
handleSubmit(e) {
e.preventDefault();
}
render() {
const dep = this.state.department.split(" ").join("");
console.log(dep);
const deps = {
ElectricalandComputerEngineering: [
"None",
"Computer Engineering",
"Control Engineering",
"Power Engineering",
"Communication Engineering",
],
ChemicalEngineering: ["None"],
MinningEngineering: ["None", "e", "f", "g", "h"],
CivilEngineering: ["None", "i", "j", "k", "l"],
MechanicalEngineering: [
"None",
"Automotive Engineering",
"Manufacture Engineering",
"Design Engineering",
"Thermal Engineering",
],
SoftwareEngineering: ["None", "p", "q", "r", "s"],
ElectromechanicalEngineering: ["None"],
EnvironmentalEngineering: ["None"],
};
const stream = deps[dep];
console.log(stream);
console.log(this.state.stream);
return (
<form onSubmit={this.handleSubmit}>
<h3>Sign Up</h3>
<div className="mb-3">
<label htmlFor="name">Full name</label>
<input
type="text"
id="name"
value={this.state.fullName}
onChange={this.handleName}
className="form-control"
placeholder="Grand Father name should be included"
required
/>
</div>
<div className="mb-3">
<label htmlFor="email">Email address</label>
<input
type="email"
id="email"
value={this.state.email}
onChange={this.handleEmail}
className="form-control"
placeholder="Enter email"
required
/>
</div>
<div className="mb-3">
<label htmlFor="ide">ID</label>
<input
type="text"
id="ide"
value={this.state.Id}
onChange={this.handleId}
className="form-control"
placeholder="ETS0155/10"
required
/>
</div>
<div className="mb-3">
<label htmlFor="dep">Department</label>
{/* <input type="text" className="form-control" placeholder="Last name" /> */}
<select
id="dep"
value={this.state.department}
onChange={this.handleDep}
required
>
<option>Electrical and Computer Engineering</option>
<option>Chemical Engineering</option>
<option>Minning Engineering</option>
<option>Civil Engineering</option>
<option>Mechanical Engineering</option>
<option>Software Engineering</option>
<option>Electromechanical Engineering</option>
<option>Environmental Engineering</option>
</select>
</div>
<div className="mb-3">
<label htmlFor="str">Stream</label>
{/* <input type="text" className="form-control" placeholder="Last name" /> */}
<select
id="str"
value={this.state.stream}
onChange={this.handleStr}
required
>
{stream && stream.map((st) => <option key={st}>{st}</option>)}
</select>
</div>
<div className="d-grid">
<Link to={"/sign-up2"}>
<button type="submit" className="btn btn-primary">
Next
</button>
</Link>
</div>
<p className="forgot-password text-right">
Already registered <a href="/sign-in">sign in?</a>
</p>
</form>
);
}
}