so I have this issue I am trying to solve, with React.
Let's say I have an object like so:
"options": {
"open": {
"text": "Open (Risky)",
"description": "Filler text for open"
},
"wpa": {
"text": "WPAWPA2PSK (TKIP / AES)",
"description": "Filler text for wpa"
},
"wpa2": {
"text": "WPA2-PSK (AES) (Recommended)",
"description": "Filler text for wpa2"
}
}
And I have it setup that the object's value's "text"
is used to populate option values in a select dropdown, like so:
const securityModeOptions = Object.values(securityMode.select.options);
{securityModeOptions.map((mode, index) =>
<option key={index} value={mode.text}>
{mode.text}
</option>
)}
What I would like to do is that whichever option value is selected, it's corresponding "description"
is displayed in a div
next to it, and the div changes based on whichever option is selected.
Thanks!
You can manage a state of the selected key
, then grab the relevant entry from the options
object via the key
.
Something like this:
const options = { open: { text: "Open (Risky)", description: "Filler text for open" }, wpa: { text: "WPAWPA2PSK (TKIP / AES)", description: "Filler text for wpa" }, wpa2: { text: "WPA2-PSK (AES) (Recommended)", description: "Filler text for wpa2" } }; class App extends React.Component { state = { selectedOptionKey: "" }; onChange = ({ target }) => { this.setState({ selectedOptionKey: target.value }); }; render() { const { selectedOptionKey } = this.state; const description = options[selectedOptionKey] && options[selectedOptionKey].description; return ( <div> <select onChange={this.onChange}> <option>Choose</option> {Object.entries(options).map(([key, value]) => ( <option value={key}>{value.text}</option> ))} </select> <div>{description}</div> </div> ); } } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"/>
You could keep the key of the selected option in state and show the description
of this selected option.
Example
const options = { open: { text: "Open (Risky)", description: "Filler text for open" }, wpa: { text: "WPAWPA2PSK (TKIP / AES)", description: "Filler text for wpa" }, wpa2: { text: "WPA2-PSK (AES) (Recommended)", description: "Filler text for wpa2" } }; class App extends React.Component { state = { options, selected: Object.keys(options)[0] }; onChange = event => { this.setState({ selected: event.target.value }); }; render() { const { options, selected } = this.state; return ( <div> <select onChange={this.onChange}> {Object.keys(options).map(key => ( <option key={key} value={key}> {options[key].text} </option> ))} </select> <span>{options[selected].description}</span> </div> ); } } ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>
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.