import React from 'react';
class Flip extends React.Component {
constructor(props) {
super(props);
this.state = {
drill_choices : [],
thickness : [],
results : [],
selectedDrill_choices : '--Choose Drill Size--',
selectedThickness : '--Choose Thickness--'
};
this.changeDrill_choices = this.changeDrill_choices.bind(this);
this.changeThickness = this.changeThickness.bind(this);
}
componentDidMount() {
this.setState({
drill_choices : [
{ name: '.004', thickness: [ {name: '.010', results: ['No', '.0036', 'N/A', 'N/A', '.018', 'N/A', 'N/A']},
{name: '.015', results: ['No', '.0036', 'N/A', 'N/A', '.023', 'N/A', 'N/A']},
{name: '.020', results: ['No', '.0036', 'N/A', 'N/A', '.028', 'N/A', 'N/A']},
]
});
}
changeDrill_choices(event) {
this.setState({selectedDrill_choices: event.target.value});
this.setState({thickness : this.state.drill_choices.find(drl => drl.name === event.target.value).thickness});
}
changeThickness(event) {
this.setState({selectedThickness: event.target.value});
const stats = this.state.drill_choices.find(drl => drl.name === this.state.selectedDrill_choices).thickness;
this.setState({results : stats.find(stat => stat.name === event.target.value).thickness});
}
render() {
return (
<div id="container">
<h2>Drill Flip App</h2>
<div>
<label>Drills</label>
<select placeholder="Drill Size" value={this.state.selectedDrill_choices} onChange={this.changeDrill_choices}>
<option>--Choose Drill Size--</option>
{this.state.drill_choices.map((e, key) => {
return <option key={key}>{e.name}</option>;
})}
</select>
</div>
<div>
<label>Thickness</label>
<select placeholder="Thickness" value={this.state.selectedThickness} onChange={this.changeThickness}>
<option>--Choose Thickness--</option>
{this.state.thickness.map((e, key) => {
return <option key={key}>{e.name}</option>;
})}
</select>
</div>
<div>
Selected Value:
</div>
</div>
)
}
}
export default Flip;
I can render the dependent dropdowns just fine, but cannot think how to return the list once those are selected.
Nvm, I figured it out.
Hello there,
Glad you figured it out.
Just so you know for future: I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.