ItSolutionStuff.com

React Select Dropdown onchange | React Select Box Example

By Hardik Savani • November 5, 2023
React JS

Hi Dev,

Today, react select dropdown onchange event is our main topic. if you want to see example of react select dropdown example then you are a right place. I’m going to show you about react dropdown select example tutorial. We will look at example of react select box example.

If you are new in react js then you want to see how to use select dropdown in react app. but it's very easy to use selectbox input in react js app. you can use it as you use in html and you have to write change event on it. using that change event you have to store value into form state. so you can get that data on submit.

In this example, we will take simple "category" select box and add onchange event with handleChange() then we will assign value on state variable array. Then on submit event we will take that values with state variable.

So, let's see bellow preview and code:

Example Code:

import React, { Component } from 'react';

import { render } from 'react-dom';

class App extends Component {

constructor() {

super();

this.state = {

category: 'php'

};

this.handleChange = this.handleChange.bind(this);

this.handleSubmit = this.handleSubmit.bind(this);

}

handleChange(event) {

this.setState({category: event.target.value});

}

handleSubmit(event) {

console.log(this.state);

event.preventDefault();

}

render() {

return (

<div>

<h1>React Select Dropdown onChange Example - ItSolutionStuff.com</h1>

<form onSubmit={this.handleSubmit}>

<strong>Select Category:</strong>

<select value={this.state.category} onChange={this.handleChange}>

<option value="php">PHP</option>

<option value="laravel">Laravel</option>

<option value="angular">Angular</option>

<option value="react">React</option>

<option value="vue">Vue</option>

</select>

<input type="submit" value="Submit" />

</form>

</div>

);

}

}

render(<App />, document.getElementById('root'));

Output:

{category: "react"}

I hope it can help you...

Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

šŸ“ŗ Subscribe on YouTube

We Are Recommending You

ā˜…

React Textbox onChange Example | React Text Input Tutorial

Read Now →
ā˜…

How to Change Date Format in React?

Read Now →
ā˜…

How to Get Current Date and Time in React?

Read Now →
ā˜…

How to Create Custom Component in React?

Read Now →
ā˜…

React Conditional Statements in Render Tutorial

Read Now →
ā˜…

React Switch Case Statement Example

Read Now →
ā˜…

React If Condition in Render Example

Read Now →
ā˜…

React Bootstrap Popovers Example

Read Now →
ā˜…

React Bootstrap Tabs Example Tutorial

Read Now →
ā˜…

React Bootstrap Modal Popup Example

Read Now →