React JSX: selecting “selected” on selected option

by

React makes this even easier for you. Instead of defining selected on each option, you can (and should) simply write value={optionsState} on the select tag itself:

<select value={optionsState}>
  <option value="A">Apple</option>
  <option value="B">Banana</option>
  <option value="C">Cranberry</option>
</select>

For more info, see the React select tag doc.

Also, React automatically understands booleans for this purpose, so you can simply write (note: not recommended)

<option value={option.value} selected={optionsState == option.value}>{option.label}</option>

and it will output ‘selected’ appropriately.

More Related Contents:

  1. Unable to access React instance (this) inside event handler [duplicate]
  2. React: “this” is undefined inside a component function
  3. State not updating when using React state hook within setInterval
  4. “this” is undefined inside map function Reactjs
  5. What are these three dots in React doing?
  6. How do I conditionally add attributes to React components?
  7. React component initialize state from props
  8. How do I test axios in Jest?
  9. Why can’t I update props in react.js?
  10. Calling setState in a loop only updates state 1 time
  11. How to make a shared state between two react components?
  12. React Routing works in local machine but not Heroku
  13. Rendering React components with promises inside the render method
  14. Can’t build React/Next project – found page without a React Component as default export (context api file)
  15. ES6 modules implementation, how to load a json file
  16. Difference between declarative and imperative in React.js?
  17. React useEffect causing: Can’t perform a React state update on an unmounted component
  18. Getting an error “A non-serializable value was detected in the state” when using redux toolkit – but NOT with normal redux
  19. React eslint error missing in props validation
  20. useEffect is running twice on mount in React
  21. When value is assigned to components state, why console.log prints the previous state?
  22. Matched leaf route at location “/” does not have an element
  23. Simulate a button click in Jest
  24. How to namespace es6 classes (for React components)
  25. using css modules how do I define more than one style name
  26. Uncaught Invariant Violation: Rendered more hooks than during the previous render
  27. How to mock React component methods with jest and enzyme
  28. Could not find “store” in either the context or props of “Connect(App)”
  29. Class based component vs Functional components what is the difference ( Reactjs ) [duplicate]
  30. value of using React.forwardRef vs custom ref prop

Leave a Comment