The majority of UI elements of a web app tends to be stateless React components, which will be rendered the same way given the same input parameters. This is based on a well-known idea of pure functions.
The best way to write such components is by using simple functions accepting props, as the following example demonstrates:
function Checkbox({ name, label, ...other }) {
return (
<div className="field" {...other}>
<input className="input" type="checkbox" name={name} />
<label className="label">{label}</label>
</div>
);
}Note
If this list of function arguments looks foreign to you, you may want to read about destructing assignment on MDN:https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignmentfunction ({ name }) { console.log(name); }
vsfunction (props) { console.log(props.name); }
It is considered a good practice to always validate input parameters of...