did not get values from dropdown in reactjs-CodePudding

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;

CodePudding user response：

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.

CodePudding user response：

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>