Form Composition with Nested Components

Form.jsx

import React, { Component } from 'react';
import Form from './Form';

class App extends Component {
  onValidEmail = () => {}
  onInvalidEmail = () => {}
  
  render() {
    return (
      <Form>
        {(props) => (
          <props.email 
            onValid={this.onValidEmail} 
            onInvalid={this.onInvalidEmail}>
            {(props) => (
              <props.field>
                {props.label}
                {props.input}
              </props.field>
            )}
          </props.email>
        )}
      </Form>    
    );
  }
}