how to update dropdown list by clicking the update button in react

user_17227120 0
Viewed 415

I want to give some text in input field and after clicking the update button it should be update in the dropdown list but its not working

import React from "react";
export default function DropDown() {
  const [input, setInput] = React.useState('');
  const selectproject=({e})=>{
    setInput(e.target.value);
  }
return (
    <>
    <select>
     <option>{input?input:'null'}</option>
    </select>
    <br/><br/>
      <input value={input} /><button onClick={selectproject}>Update</button>
    </>
  );
}
reactjs javascript
3 Answers

remove curly braces on selectproject props.

selectproject=(e)=>{
    setInput(e.target.value);
  }

you are destructuring e in <Event> which is not available. if you want to destructuring it, try this instead

selectproject=({target: {value}})=>{
     setInput(value);
   }

if you want dropdown list to be updated after clicking button, you'll need another state

import React from "react";
export default function DropDown() {
  const [input, setInput] = React.useState("");
  const [project, setProject] = React.useState("");
  const selectproject = () => {
    setProject(input);
  };
  const handleOnChange = (e) => {
    setInput(e.value.target);
  };
  return (
    <>
      <select>
        <option>{project ? project : "null"}</option>
      </select>
      <br />
      <br />
      <input value={input} onChange={handleOnChange} />
      <button onClick={selectproject}>Update</button>
    </>
  );
}

user_171786790

Need to remove curly brace around e and set onchange to input:

import React from "react";
export default function DropDown() {
  const [input, setInput] = React.useState("");
  const selectproject = (e) => {
    setInput(e.target.value);
  };
  return (
    <>
      <select>
        <option>{input ? input : "null"}</option>
      </select>
      <br />
      <br />
      <input value={input} onChange={selectproject} />
      <button onClick= {selectproject}>Update</button>
    </>
  );
}
user_30892710

You can use from two useState:

import React from "react";
function DropDown() {
    const [input, setInput] = React.useState('');
    const [select,setSelect] = React.useState('');

    const selectproject = () => {
        setSelect(input);
    }

    const handleChange = (e) => {
        setInput(e.target.value);
    }
    return (
        <>
            <select>
                <option>{select?select:'null'}</option>
            </select>
            <br/><br/>
            <input onChange={handleChange} value={input} /><button onClick={selectproject}>Update</button>
        </>
    );
}
user_170071840
Related