did not get values from dropdown in reactjs

Question

i am new to react and just started a project could anyone please let me know why i am not getting values in alert message thing is i don't know how to get values in dropdown. I want dropdown message in alert or some console. thanks in advance for the help.

import React,{useState} from 'react';
import './Content.css';


function Content(){

    const [value, setValue] = useState([{
       
        application:'',
        platform :''
    }])

    const dropdownHandler =(event) =>{ 
        setValue({application:event.target.value,platform :event.target.value,...value})
        alert(console.log(value));
        
    }

    
   
    return(
        <div>
            <div className="application-container">
            <label>Application</label>
             <select name="application"> 
             <option value="umrportal">umrportal</option>
             <option value="2">2</option>
             <option value="3">3</option>
             </select>
             </div>

             <div className="platform-container">
             <label>Type of platform</label>
             <select name="platform"> 
             <option value="UMR">UMR</option>
             <option value="IVR">IVR</option>
             <option value="middleware">Middleware</option>
             </select>
             </div>
<button className="btn-round" onClick={dropdownHandler}>submit</button> 
        </div>
    )
}

export default Content;

You aren't using dropdownHandler at all, why would you expect it to be called? — AKX
– AKX, Commented Apr 20, 2022 at 17:48
sorry seems like the full code is not selected here is the full code i am using dropdownhandler in function return <button className="btn-round" onClick={dropdownHandler}>submit</button> </div> ) } export default Content; — Ritu
– Ritu, Commented Apr 20, 2022 at 17:53
You can't console.log the updated state immediately, even if you could - console.log doesn't return anything, so alerting it will always be undefined. — Brian Thompson
– Brian Thompson, Commented Apr 20, 2022 at 17:54
Does this answer your question? The useState set method is not reflecting a change immediately — David
– David, Commented Apr 20, 2022 at 17:55
@RituRajput: You're most likely doing a number of things wrong in the code. The question is... What do you want the code to do? What should clicking this button accomplish? Right now you appear to be trying to track the value of the button... sort of. But the button itself has no value. What's the goal here? — David
– David, Commented Apr 20, 2022 at 18:09

David · Accepted Answer · 2022-04-20 18:29:28Z

1

Get rid of the button.

The event you want to use is the change event on each drop-down. For example, consider this markup:

<div>
  <div className="application-container">
    <label>Application</label>
    <select name="application" onChange={dropdownHandler} value={value.application}> 
      <option value="umrportal">umrportal</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  </div>
  <div className="platform-container">
    <label>Type of platform</label>
    <select name="platform" onChange={dropdownHandler} value={value.platform}> 
      <option value="UMR">UMR</option>
      <option value="IVR">IVR</option>
      <option value="middleware">Middleware</option>
    </select>
  </div>
</div>

Note two things I'm doing here:

Calling the dropdownHandler from the drop-down, not from a button. Because the event with the name/value is on the form element, not some button.
Setting the value of the drop-down from state.

What this would do is then update the state for each change, and always show the current state.

The state you're using is also wrong. You're initializing it to an array for some reason. Just use an object:

const [value, setValue] = useState({
  application:'',
  platform :''
});

At this point all you need is a dropdownHandler which updates that object. Each event from the <select> element is going to have the name and the new value, which you can use to set the property on your object (as long as the names and the properties match, which in this case they do):

const dropdownHandler = event => {
  setValue({
    ...value,
    [event.target.name]: event.target.value
  });
};

You can see a running example here.

If you want to add a button, then the question would become: What do you want that button to do? If it's just update the state, you don't need it. You update the state every time the a form element changes.

answered Apr 20, 2022 at 18:29

David

221k42 gold badges245 silver badges337 bronze badges

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

3 Comments

Ritu Over a year ago

thanks i need button because from those selected values only i need to navigate to the next page

David Over a year ago

@RituRajput: Then you can add a button and use a click handler for that button to navigate to the next page. Which would be your next step once you have this form working.

Ritu Over a year ago

thanks so much :) i will do thanks all for the help and efforts

bnays mhz · Accepted Answer · 2022-04-20 18:20:20Z

0

You need to add onChange event for select.

           <select name="application" onChange={(e) => dropdownHandler(e)} value={application}>
              <option value="umrportal">umrportal</option>
              <option value="IVR">IVR</option>
              <option value="middleware">Middleware</option>
           </select>


<select name="platform" onChange={(e) => dropdownHandler(e)} value={platform}>
                  <option value="UMR">UMR</option>
         <option value="IVR">IVR</option>
         <option value="middleware">Middleware</option>
               </select>

edited Apr 20, 2022 at 18:20

answered Apr 20, 2022 at 17:55

bnays mhz

5033 silver badges7 bronze badges

8 Comments

Ritu Over a year ago

not working it is throwing error on console as Content.js:25 Uncaught TypeError: Cannot read properties of undefined (reading 'dropdownHandler') please help

David Over a year ago

You're confusing class-based components with function-based components.

bnays mhz Over a year ago

Hi Ritu, I have made changes to the above code. Please check

Ritu Over a year ago

@bnays thanks but getting error as below ,i am using function-based components Warning: The value prop supplied to <select> must be a scalar value if multiple is false.

bnays mhz Over a year ago

You are setting multiple value to select from this: setValue({application:event.target.value,platform :event.target.value,...value}) You need to have separate state for each select

|

Collectives™ on Stack Overflow

did not get values from dropdown in reactjs

2 Answers 2

3 Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related