specialized components

field.js

import React from 'react';
import Label from './label';
import Input from './input';

function Field (props) {
  return (
    <div className="form-group">
      <Label>{props.label}</Label>
      <Input type={props.type} onChange={props.onChange} value={props.value}/>
    </div>
  );
}

index.js

import React from 'react';
import Field from './field';

class Index extends React.Component {
  
  handleChange = () => {
    //update field state  
  }
  
  render() {
    return (
      <form>
        <Field label="Nome" type="text" onChange={this.handleChange}/>
        <Field label="Email" type="email"  onChange={this.handleChange}/>
        <Field label="Telephone" type="tel"  onChange={this.handleChange}/>
      </form>
    );
  } 
}

input.js

import React from 'react';

function Input (props) {
  return (
    <input {...props}/>
  );
}

label.js

import React from 'react';

function Label (props) {
  return (
    <label className="form-label">{ props.children }</label>
  );
}