Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

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

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>
    </>
  );
}
about 4 years ago · Juan Pablo Isaza
3 answers
Answer question

0

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>
    </>
  );
}

about 4 years ago · Juan Pablo Isaza Report

0

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>
    </>
  );
}
about 4 years ago · Juan Pablo Isaza Report

0

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>
        </>
    );
}
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!