/Javascript/React/Use onchange with react select

Use onchange with react select

Handle onchange react

import React, { Component } from 'react';

import './App.css';
import Header from './Header';

class App extends Component {

  constructor(props) {
    super(props);
   this.state = {name: "Michael"}

  }
   changeTitle = (e) =>{
      this.setState({name: e.target.value});
    }

  render() {
    return (
      <div className="App">
        <Header title={this.state.name}/>
        <p className="App-intro">
          Type here to change name.
        <input type="text" onChange={this.changeTitle}/>
        </p>
      </div>
    );
  }
}

export default App;

Source: stackoverflow.com

Use onchange with react select

const [valueState,setValueState] = useState("")
// create a function that handle the React-select event and
// save the value of that event on an state every time the component change
    const handler = (event) => {
        const value = event.value
        setValueState(value)
    }
<Select options={"your options"} onChange={handler}/>

Similar codes

6 votes257 views2 answers
React native indicator
Javascript React
1 vote259 views1 answer
React native create view dynamically
Javascript React
13 votes203 views1 answer
ReactDOM is not defined
Javascript React
38 votes255 views2 answers
How to comment out code in react js
Javascript React
0 vote275 views1 answer
How to redirect a form to another page when we submitted a form in react js
Javascript React
29 votes261 views6 answers
React background image
Javascript React
3 votes262 views1 answer
React icons in nextJS
Javascript React
0 vote277 views1 answer
Key being passed as prop react
Javascript React
0 vote237 views1 answer
How to only register one click on nested component and not parent component in react js
Javascript React
0 vote291 views1 answer
Detect if user is online react
Javascript React