When building and writing up your React applications, you would typically be designing components that make up your UI screens for users to interact. Your components could be ranging from menu navigation tabs, tables displaying data, to paginated items, image gallery etc, etc..
You know.
The usual UI suspects full-stack web developers normally face.
For eg, let’s say if you were to up build a form that comes with some drop-down fields, your React code would look like this.
React Appimport React, { Component, Fragment } from "react";
export default class FormApp extends Component {
state = {
dropdown_shirt: null
}
searchMe = e => {
// Magic is going to happen here.
};
pickMe = e => {
//state your name!
this.setState({[e.target.name]: e.target.value}
}
render() {
return (
<Fragment>
<h1>Welcome to my Awesome React App</h1>
<form className="form-container">
<label htmlFor="dropdown_shirt">Shirts</label>
<select name="dropdown_shirt" onChange={this.pickMe}>
<option value="polo_tees">Polo Tees</option>
<option value="sleeveless">Sleeveless</option>
<option value="v_necks">V Necks</option>
</select>
<button onClick={this.searchMe}>Find me some tees!</button>
</form>
{/* The table data will be rendered here when searching */}
</Fragment>
);
}
}