yuritoledo

First, you'll need NodeJS and NPM:

sudo apt install curl
curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install -y nodejs
nodejs -v
v8.4.0

yuritoledo

const FDropdown = ({ field, form: { setFieldValue, setFieldTouched }, ...props }) => (
  <>
    <label>Super Herói</label> <br />
    <Dropdown 
      {...field} 
      {...props} 
      onChange={(e, { value }) => setFieldValue('superHeroi', value)}
      onBlur={(e, { value }) => setFieldTouched('superHeroi', true, true)}
    />
  </>

yuritoledo

<Field 
  name='superHeroi' 
  component={FDropdown}
  options={options}
  selection
/>

yuritoledo

<Field name='email'>
  {({ field }) => (
    <Input {...field} error={false} options={...} />
  )}
</Field>

yuritoledo

<Field
  name='senha'
  render={({ field }) => (
    <Input {...field} error={false} options={...} />
  )}
/>

yuritoledo

import { Input } from 'semantic-ui-react'


<Field name='nome' component={FInput} error={true} options={...} />
  
const FInput = ({ field, ...props }) => (
  <Input {...field} {...props} />
)

yuritoledo

import { Input } from 'semantic-ui-react'

// Component
<Field name='nome' component={FInput} />
  
const FInput = ({ field, ...props }) => (
  <Input {...field} {...props} />
)

// Render

yuritoledo

handleChange = e => {
    const { name, value } = e.target
    this.setState({ [name]: value })
}
​
const { user } = this.state
<Input 
  name='user'
  value={customer}
  onChange={this.handleChange}

yuritoledo

class Form extends PureComponent {
  handleChange = e => {
    const { name, value } = e.target
    this.setState({ [name]: value })
  }
​
  handleChangeNested = e => {
    const { name, value } = e.target
    this.setState({
      address: { 

yuritoledo

<Field name='firstName' component={CustomInputComponent} />
​
const CustomInputComponent = ({ field, …props }) => (
 <div>
   <InputCustom {…field} {…props} />
 </div>
);
// ou
<Field
  name='firstName'