How to make a select input that is dependent on other inputs to always show a default value in React?

I have two radio buttons: radio1 and radio2, and one select input. The Select values depend on the radio buttons. I want to set the select value to 1 whenever I select radio1. I’ve tried setting defaultValue and value to the select input but every time I switch back to radio1 from radio2, the value is always set to 2.

Here’s my code, any help is truly appreciated:

import "./styles.css";
import { useState } from "react";

const selectItems = {
  name: "size",
  fields: {
    radio1: [
      {
        value: "1"
      },
      {
        value: "2"
      }
    ],
    radio2: [
      {
        value: "2"
      },
      {
        value: "3"
      },
      {
        value: "4"
      }
    ]
  }
};

const App = () => {
  const [values, setValues] = useState({ radio: "radio1", select: "2" });
  const handleChange = (name, value) => {
    setValues((s) => {
      return { ...s, [name]: value };
    });
  };

  return (
    <div className="App">
      <h2>
        How do I make the Select always be '1' when Radio1 is selected after
        selecting Radio2?
      </h2>
      <input
        type="radio"
        id="radio1"
        value="radio1"
        name="radio"
        onChange={() => handleChange("radio", "radio1")}
      />
      <label htmlFor="radio1">Radio1</label>
      <input
        type="radio"
        id="radio2"
        value="radio2"
        name="radio"
        onChange={() => handleChange("radio", "radio2")}
      />
      <label htmlFor="radio2">Radio2</label>
      <br />
      <select
        id="size"
        name="size"
        onChange={(e) => handleChange("select", e.target.value)}
      >
        {selectItems.fields[values.radio].map(({ value }) => {
          return (
            <option key={value} value={value}>
              {value}
            </option>
          );
        })}
      </select>
    </div>
  );
};

export default App;

example: https://codesandbox.io/s/goofy-danny-p1l3s?file=/src/App.js:0-1460

Edit:

As suggested by some answers, I have tried setting ‘selected’ as true. In fact, I have tried this before and forgot to mention it on my question. This seem to work, it gives me the desired effect on the browser, but then I get this error on the console:

Warning: Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>.

Answer

The main problem here is <option> is taking the same key value. When you are selecting radio2, key becomes 2.Then you are selecting radio1 and for that <select> has <option> with key=2. That is why <select> value not changing. The proof is if you change all <option> values unique, example for radio1 {1, 2} and for radio2 {3, 4, 5} your code works fine.

There may be multiple workarounds but the proper way to solve this is having unique id for each of the <option>.

const selectItems = {
  name: "size",
  fields: {
    radio1: [
      {
        value: "1",
        id: 1
      },
      {
        value: "2",
        id: 2
      }
    ],
    radio2: [
      {
        value: "2",
        id: 3
      },
      {
        value: "3",
        id: 4
      },
      {
        value: "4",
        id: 5
      }
    ]
  }
};
------------------------------------------
<select
        id="size"
        name="size"
        onChange={(e) => handleChange("select", e.target.value)}
      >
        {selectItems.fields[values.radio].map(({ value, id }) => {
          return (
            <option key={id} value={value}>
              {value}
            </option>
          );
        })}
      </select>

Advertisement

Answer