This article is focused on react select dropdown example. you will learn react dropdown select example tutorial. This article will give you simple example of react select box example. you'll learn react select option example. Alright, let’s dive into the steps.
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 - HDTuto.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...
Do you like below Tutorials ?
- PHP Laravel 5.5 - import export data into excel and csv using maatwebsite
- Laravel 7.x and 6.x create custom facade example from scratch
- Node JS - Get Real time online users counter using socket io example
- PHP Laravel 7.x and 6.x - Bootstrap Admin Theme Integration example from scratch
- MySQL Query - How to select records of today to next Sunday ?
- Laravel 7.x and 6.x - username custom validation example
- Laravel 5.5 - Import Extract zip file using chumper/zipper package
- PHP Laravel Set Custom Validation Error Messages Example