Question 168499 in Html Question posted in
Some basic documentation can be found here.

How do I get select element values in ReactJS?

I am having a hard time retrieving the value of a selected element, in a dropdown list.
I tried debugging it, but could not get the value.
Tried to console log e.target.value, but it didn’t work.
Any idea what might be wrong in my code?

const [values, setValues] = useState({
    lastName: "",
    firstName: "",
    lastNameHiragana: "",
    firstNameHiragana: "",
    birthday: "",
    sex: "",
    telephone: "",
    email: "",
    enterDate: "",
});


// inputs to be created in form
const inputs = [
     {
      id: 1,
      name: "lastName",
      type: "text",
      label: "姓",
      required: true,
    },

    {other objects in between},

    {
      id: 6,
      name: "sex",
      type: "select",
      required: true,
      values: ["男性", "女性"],
      label: "性別",
    },

]

const onChange = (e) => {
    setValues({ ...values, [e.target.name]: e.target.value });
};


// Form makes input fields, according to the input type(defined above)
<form>
    {inputs
    .filter((input) => input.id <= 8)
        .map((input) => (
            <div key={input.id} className="mb-3">
                <label htmlFor={input.name} className="form-label m-0">
                    {input.label}
                </label>
                {input.type === "select" ? (
                    <select
                      name={input.name}
                      id={input.id}
                      className="form-select"
                      onChange={onChange}
                    >
                      {input.values.map((value) => {
                        <option value={optionValue} key={value}>
                            {value}
                        </option>
                      })}
                    </select>
                  ) : (
                    <input
                      ref={inputs.id}
                      name={input.name}
                      type={input.type}
                      className={`form-control ${styles.input} `}
                      id={input.id}
                      required={input.required}
                      onChange={onChange}
                    />
                  )}
                <span className={`text-danger text-center`}>
                    {errorMessage[input.name]}
                </span>
            </div>
        )
    )}
</form>
Tags:

2

Answers


  1. 0

    In this code, optionValue is not defined

    <option value={optionValue} key={value}>
    {value}
</option>

    Change it to value and you should get the correct output.

    Login or Signup to reply.
  2. 0

    You can use the react state to store and get the select box value as below

    function MyComponent() {
 const [selectedValue, setSelectedValue] = useState('');

 const handleSelectChange = (e) => {
  setSelectedValue(e.target.value);
  // Perform any additional actions based on the selected value
 };

return (
  <div>
    <select value={selectedValue} onChange={handleSelectChange}>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
    <p>Selected value: {selectedValue}</p>
  </div>
);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search