Although we have made our React code much clearer by using JSX, it's still not as clean and DRY as it could be. For instance, we are defining the same input element twice, even though they have the same structure.

<label>
  Email
  <input type="email" />
</label>
<label>
  Password
  <input type="password" />
</label>

This is not ideal because of the following factors:

• It can lead to inconsistency. To achieve a consistent user experience, we should apply a consistent style and layout for all components, including these input boxes. Defining input boxes without a standard template will make it difficult to do this.
• It is difficult to update. If the designs change and we need to update all the input boxes to fit this new design, it'll be difficult to find all occurrences of the input box and update its style. Humans are error-prone and we might miss one or two.

We should ensure our React code is DRY; therefore, we should define an independent component that we can reuse wherever an input field is needed.