As a frontend developer, handling the input elements is so easy with HTML5 and Javascript. But it is quite challenging in the frameworks. Consider we have to create a dropdown, checkbox, radio buttons, etc., There are few reasons to consider before designing such input elements which add up complexity.
1. Ability to adapt any business logic (API calls, computation, CRUD, etc., )
2. No compromise in functionality and performance
3. Uniform throughout the project & Reusability (UX matters)
4. Few lines of code for an input element
5. Error handling
6. Cross-browser compatibility
Check the following codepen.io to read how to create a reusable dropdown. It’s a very basic dropdown and this post is for the starters of React to write a simple reusable Dropdown component.
Consider creating a reusable dropdown component with the following props values. If needed add more props for styling, error-handling, etc., as per your requirements.
In the onChange(), you can have any functional logic for the selected value. Eg: You can have any API calls, display selected value, etc., as per your requirements.
Add your own CSS to style it. If you wish to have some different looks for the dropdown, try passing the different class names as a prop and write your own CSS for different class names. Nowadays, developers started using CSS in JS which avoids creating more classes. Think about it too.
// Reusable Dropdown
class Dropdown extends React.Component { // selectValue => current selected value
// filterData => choices in the dropdown
// setFilteredData => function to change the selectValue handleChange = e => {
this.props.setFilteredData(e.target.value);
}; render() {
const { selectValue, filterData } = this.props;
return (
<div className='ddown'>
<select
value={selectValue}
onChange={this.handleChange}
>
<option hidden>Select your option</option>
{filterData.map(data => {
return (
<option key={data} value={data}>
{data}
</option>
);
})}
</select>
</div>
);
}
};
In a Parent Component, import the dropdown component and pass its necessary props.
class Parent extends React.Component {
constructor() {
super();
this.state = {
selectValue: null,
filterData: ['India', 'Canada', 'Srilanka', 'Afghanisthan']
};
}onChangeHandle = (name) => {
this.setState({ selectValue: name });
};render() {
return (
<div className='parent'>
Please select your country:
<Dropdown
selectValue={this.state.selectValue}
filterData={this.state.filterData}
setFilteredData={this.onChangeHandle}
/>
<div>
{this.state.selectValue ?
`The selected country is ${this.state.selectValue}`
:'You have not selected a country'
}
</div>
</div>
);
}
}React.render(<Parent />, document.getElementById('app'));
You might consider either having a state value at the Dropdown component or Parent component to detect the selected value. It’s your choice. But I consider having that in the parent component for the freedom of reusability. Because we should handle the effect of changing the dropdown values at the parent to satisfy the business logic.
I am in the mission of writing content for the budding developers. I am more likable to write about a simple solution for a problem that seems to be tough at first sight but actually, it’s not. If you have such any ideas or faced at your career inception, drop in the comment box.
Please write if you have any queries, ideas or anything to write about in the future.
Here we go with the crazy sign off (please read as you can watch in the youtube channels) Please, Like, Comment, Follow & Subscribe to my blog site!!!
Mind reading about my other blogs? How about reading Snackbar/Toast menu ?!
