The Be Sure Blog

Let's say we have the following code:

const currentCategory = "React";
const categories = ["Node.js", "React", "Next.js"];
return (
  <select>
      {
        categories.map((category, index) => (
          <option key={index} value={category} selected={category == currentCategory}>{category}</option>
        )
     }
  </select>
)

React will loop through the categories array and add an option element for each entry (Node.js, React and Next.js). Also, for each element, it will check if the current category string matches the string of currentCategory, which is "React" in every iteration. Of course, two times the result will be false, one time it will return the boolean "true". Only in this case, the "selected" attribute will be added to the option element.

The output will look like this:

<select>
  <option key="0" value="Node.js">Node.js</option> 
  <option key="1" value="React" selected>React</option> 
  <option key="2" value="Next.js">Next.js</option> 
</select>