JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app"></div>

React

class ManufacturerForm extends React.Component {
  constructor (props){
    super(props);
    this.state = {
      manufacturer: '',
    };
    this.onFieldChange = this.onFieldChange.bind(this); //ensures that 'this' in onFieldChange is 'this' in the constructor
    this.handleSubmit = this.handleSubmit.bind(this); //ensures that 'this' in handleSubmit is 'this' in the constructor
  }

  handleSubmit(event) {
    event.preventDefault(); //prevents the form from being submitted
    this.props.onAddManufacturer(this.state);
  }

  onFieldChange(event) {
    this.setState({
      [event.target.name]: event.target.value
    });
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <div className="AddManufacturerForm__input">
            <label htmlFor="manufacturer">Manufacturer</label>
            <input type="text" name="manufacturer" value={this.state.manufacturer} onChange={this.onFieldChange}/>   
        </div>
        <input type="submit" value="Add" />
      </form>
    );
  }
}

function AddManufacturerForm({match, onAddManufacturer}) {
    return (
      <div className="AddManufacturerForm">
        <h1> Add Manufacturer</h1>
        <ManufacturerForm onAddManufacturer={onAddManufacturer}/>
      </div>
    );
}

function log(msg) {
  console.log(msg);
}

// intermediary to AddManufacturerForm to specify props
function ManufacturerWrapper() {
  return <AddManufacturerForm onAddManufacturer={console.log} />
}

function render() {
  ReactDOM.render(
    <React.StrictMode>
      <ManufacturerWrapper />
    </React.StrictMode>,
    document.querySelector("#app")
  );
}
render();