Heres my app structure
Codepen Example : https://codesandbox.io/s/awesome-blackwell-kd3nn
class MasterForm extends Component {
constructor() {
super();
this.state = {
userInput: "",
available: "",
silos: []
};
}
handleFormSubmit = e => {
e.preventDefault();
this.silo_1Lookup();
};
handleInputChange = e => {
let input = e.target;
let name = e.target.name;
let value = input.value;
this.setState({
[name]: value
});
};
silo_1Lookup = () => {
let silos = [...this.state.silos];
silos.push({
userInput: this.state.userInput,
available: this.state.available
});
this.setState({
silos,
userInput: "",
available: ""
});
const siloDepthFilling = {
"0": "926",
"0.5": "893",
"1": "860",
"1.5": "827",
"2": "794",
"2.5": "761",
"3": "728",
"3.5": "695",
"4": "662",
"4.5": "629",
"5": "595"
};
console.log("function ran");
return siloDepthFilling[silos[0].userInput];
};
}
I'm trying to change the property of silos[0].available to match the content inside of my silo_1Lookup() function.
For example, if the user enters 5, silos[0].available should be set to "595"
if (silos[0].userInput === '5') {
return silos[0].available = "595"
}
kinda like that but using the dictionary inside silo_1Lookup();
At the moment, the function runs, but silos[0].available is not being updated with a new value, and there is no error message
You are not updating the state after changing available
value.
In your function, call setState()
after making required changes.
You are using silos
to display both userInput
and available
. So updating silos
is what changes the view, not available
.
silo_1Lookup = () => {
const siloDepthFilling = {
"0": "926",
"0.5": "893",
"1": "860",
"1.5": "827",
"2": "794",
"2.5": "761",
"3": "728",
"3.5": "695",
"4": "662",
"4.5": "629",
"5": "595"
};
console.log("function ran");
let available = siloDepthFilling[this.state.userInput];
let silos = [...this.state.silos];
silos.push({
userInput: this.state.userInput,
available: available
});
this.setState(
{
silos: silos,
available: available
}
);
};
Also, you are not using key
for your list items and it is throwing an error. Make following changes to your Table
component.
{silos.map((silo, i) => {
return (
<tr key={i.toString()}>
<td>{silo.userInput}</td>
<td>{silo.available}</td>
</tr>
);
})}
The root cause of your problem is, you need to update every time your array silos[]
when you will get a new value for available
. so the approach has given below.
handleInputChange = e => {
let input = e.target;
let name = e.target.name;
let value = input.value;
this.setState({
[name]: value
});
};
silo_1Lookup = () => {
let silosss = [...this.state.silos];
const siloDepthFilling = {
"0": "926",
"0.5": "893",
"1": "860",
"1.5": "827",
"2": "794",
"2.5": "761",
"3": "728",
"3.5": "695",
"4": "662",
"4.5": "629",
"5": "595"
};
// Push user input and available value in array
silosss.push({
userInput: this.state.userInput,
available: siloDepthFilling[this.state.userInput]
});
// Finally update the state of both array and available value
for(var item of silosss){
this.setState({
silos:silosss,
available: item.available
});
}
};
Finally, the output should be like that
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.