Exemplo fluxo pai > filho de formulário

Form.js

import React, { Component } from 'react'
import ReactDOM from "react-dom";

class Input extends Component {
  render() {
    return (
      <div>
        <h2>Filho: {this.props.value}</h2>
        <input
          name={this.props.name}
          value={this.props.value}
          onChange={(e) => this.props.onChange(e.target.value)}
        />
      </div>
    )
  }
}

class Form extends Component {
  constructor(props) {
    super(props)

    this.state = {
      name: 'test',
      email: '[email protected]'
    }
  }

  render() {
    return (
      <div>
        <p>Name: {this.state.name}</p>
        <Input name="name" value={this.state.name} onChange={(value) => this.setState({name: value})} />
        <Input name="email" value={this.state.email} onChange={(value) => this.setState({email: value})} />
      </div>
    )
  }
}

const App = () => <Form />

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);