How to set the selected option on a select element with React and JSX

How to set the selected option on a select element with React and JSX

In this post find the quick and simple solution for how to set the selected option on a select element with React and JSX - Quick Fix Series!

Will Mayger

A post by Will Mayger
August 03, 2021

In this quick post we will be covering how to set the “selected” option on a select element with React and JSX so you can solve this issue quickly and without having to look any further!

As with all my Quick Fix Series of posts, you will first find the problem described and then the solution just below.

Let’s get stuck in!

The problem - Setting the “selected” option on a select element with React and JSX

When using React and JSX, from time to time you will encounter a scenario where you need to use a select element.

In standard HTML you could set the selected element by marking it on the option as “selected”.

For example:

<select name="example">
  <option value="1" selected>1</option>
  <option value="2">2</option>
</select>

The issue here comes from how in React and JSX we usually control our components and you don’t really want to have to perform a boolean check on each and every option element to mark whether it has been selected or not.

The Solution - setting “selected” on a select element with React and JSX

React and JSX actually handle this for us straight out of the box so we don’t need to worry about having to check each option to see whether it needs to be selected or not.

All we need to do is to define a value prop on the parent select element and then pass in whatever value has been selected.

Here is an example of how we can do that:

<select name="example" value={selectedElement} onChange={handleChange}>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

You can read more about this here in the React docs.

Lastly, it is also worth noting that this also works with multiple options as well.

This means that if you have set the multiple attribute/prop in the select element and you can select multiple option elements, to be able to control that with React and JSX all you need to do is provide an array to the value prop/attribute of the parent select elements in the same way as above.

export default function Example() {
  const [selectedElements, setSelectedElements] = useState([])

  return (
    <select
      name="example"
      multiple
      value={selectedElements}
      onChange={handleChange}
    >
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
  )
}

Summary

There we have the quick fix to how to set the “selected” option on a select element with React and JSX, if you want more like this be sure to check out some of my other posts!

I hope this post has helped, but before you go I highly recommend that you checkout Pluralsight if you are interested in improving your software engineering skills, such as React, JavaScript, or Typescript (and much more).

Not only does Pluralsight provide you with all the learning material you need but it also let's you learn in a fun, interactive way and gives you the ability to see your current progress and level in a certain skill via their Skill Assessment tool which can help you see what you need to learn next to keep improving!

Some graphics used on this post were made using icons from flaticon.