Get value from <select> (dropdown) in React JS

Question

I want to show more input when "married" option is selected. I tried this.

    const [single, setsingle] = useState(false);
    const [married, setmarried] = useState(false);
    
    <select class="form-select" aria-label="Default select example">
        <option
            value={single}
            name="single"
            onChange={(e) => {
                setsingle(e.target.value);
            }}
        >
            محرد
        </option>
        <option value={married} name="married"
            onChange={(e) => {
                setmarried(e.target.value)}}
        >
            متاهل
        </option>
    </select>

    {married === "married" ? <Wife /> : null}

What did I miss?

Aamin Khan · Accepted Answer · 2021-04-06 21:23:22Z

1

The easiest way to achieve this to manage the status in one variable. also, onChange event should be in select

import React, { useState } from "react";

export default function App() {
  const [status, setStatus] = useState(null);

  function changeStatus(e) {
    setStatus(e.target.value);
  }
  return (
    <div className="App">
      <select value={status} onChange={changeStatus}>
        <option value="single">Single</option>
        <option value="married">Maried</option>
      </select>
      {
        status === "married" && <Wife />
      }
    </div>
  );
}


const Wife = () => {
  return <div>
    <input placeholder="Please enter name" />
  </div>
}

Working sandbox - https://codesandbox.io/s/interesting-shamir-3k17b

answered Apr 6, 2021 at 21:23

Aamin Khan

7374 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shubhaw Kumar · Accepted Answer · 2021-04-06 21:30:57Z

There are few basics/fundamental things which you need to correct in your code:

You need to put onChange inside <select>, not inside <option>.
You have created single and married as boolean and then comparing it as string value.
You are always setting the value false.
You can't use class inside any JSX elements. Instead of class, you must use className for setting the CSS classes.

Your code should look like this:

const [single, setsingle] = useState(false);
const [married, setmarried] = useState(false);

...

return (
    <>
        <select className="form-select"
            aria-label="Default select example"
            onChange={e => {
                const selectedValue = e.target.value;
                if(selectedValue === "single") {
                    setsingle(true);
                    setmarried(false);
                } else {
                    setsingle(false);
                    setmarried(true);
                }
            }} 
        >
            <option value={"single"} name="single">
                محرد
            </option>
            <option value={"married"} name="married">
                متاهل
            </option>
        </select>
        {married && <Wife />} {/* here since married is boolean, you can directly use it like this, or you can use {married === true ? <Wife /> : null} */}
    </>
)

Collectives™ on Stack Overflow

Get value from <select> (dropdown) in React JS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related