Regardless of the syntax, all React components must be pure. A pure component is one where:

• The return value (the React element) is deterministic, based only on the component's input (props).
• The component does not produce side-effects. For example, a pure component should not mutate the props.

Pure functions and functional components are good because they are easier to understand and test. Therefore, when we have a large or heavily-nested component like our Form element, it's good practice to break it down into smaller pure functional components, and use these components to compose the element.

Try turning our button into its own (simple) component. The end result should look like this:

function Input(props) {
  return <label>{props.label}<input type={props.type} /></label>
}
function Button(props) {
  return <button>{props.title}</button>
}
const RegistrationForm = () => (
  <form>
    <Input label="Email" type="email" />
    <Input label="Password" type="password" />
    <Button title="Register" />
  </form>
);
ReactDOM.render(<RegistrationForm />, document.getElementById('renderTarget'));