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, Apr 20 '22 at 17:48
sorry seems like the full code is not selected here is the full code i am using dropdownhandler in function return ) } export default Content; — Ritu, Apr 20 '22 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, Apr 20 '22 at 17:54
Does this answer your question? [The useState set method is not reflecting a change immediately](https://stackoverflow.com/questions/54069253/the-usestate-set-method-is-not-reflecting-a-change-immediately) — David, Apr 20 '22 at 17:55
You're also setting both the application and the platform to e.target.value; which, on a button click event I highly doubt will get what you want. — Brian Thompson, Apr 20 '22 at 17:56
@RituRajput: If the data you're looking for is in the `event` variable then you could try logging the `event` variable to the console... — David, Apr 20 '22 at 17:57
@David thanks for replying it is returning event as below _targetInst is null SyntheticBaseEvent {_reactName: 'onClick', _targetInst: null, type: 'click', nativeEvent: PointerEvent, target: button.btn-round, …} am i doing anything wrong in the code — Ritu, Apr 20 '22 at 18:06
@BrianThompson can you please let me know am i doing wrong because i am working on this since 2 days but didn't find any solution — Ritu, Apr 20 '22 at 18:08
@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, Apr 20 '22 at 18:09

score 1 · Accepted Answer · answered Apr 20 '22 at 18:29

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.

thanks i need button because from those selected values only i need to navigate to the next page — Ritu, Apr 20 '22 at 18:33
@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. — David, Apr 20 '22 at 18:34
thanks so much :) i will do thanks all for the help and efforts — Ritu, Apr 20 '22 at 18:37

bnays mhz · Answer 2 · 2022-04-20T18:20:20.897

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 '22 at 18:20

answered Apr 20 '22 at 17:55

bnays mhz

425
2
7

not working it is throwing error on console as Content.js:25 Uncaught TypeError: Cannot read properties of undefined (reading 'dropdownHandler') please help – Ritu Apr 20 '22 at 18:02
1

You're confusing class-based components with function-based components. – David Apr 20 '22 at 18:08
Hi Ritu, I have made changes to the above code. Please check – bnays mhz Apr 20 '22 at 18:11
@bnays thanks but getting error as below ,i am using function-based components Warning: The `value` prop supplied to – Ritu Apr 20 '22 at 18:14
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 – bnays mhz Apr 20 '22 at 18:16
const [application, setApplication] = useState(""); const [platform, setPlatform] = useState(""); – bnays mhz Apr 20 '22 at 18:18
@bnays in this way you want me to do please help tommorow i need to show this but somewhere it is failing function Content(){ const [appValue, setappValue] = useState([{ application:'' }]) const[platformValue,setplatformValue] = useState([{ platform:'' }]) const dropdownHandler =(event) =>{ setappValue({application:event.target.value}); setplatformValue({platform:event.target.value}); console.log(event); } – Ritu Apr 20 '22 at 18:26
https://codesandbox.io/s/select-onchange-forked-tbwmk8?file=/src/App.js – bnays mhz Apr 20 '22 at 18:35

did not get values from dropdown in reactjs

2 Answers2