Please fix this error. Using react.js. Also there will be submit button, after click submut button then will back, edit, and delete button. Show screenshot  Using react.js, create a inventory page where screen will display  Inventory: Name Storage Type Max Item Capacity Resources: Resource Name Resource Type Max Number of Resources Current Number of Resources   body {   padding: 30px 20%; } h1 {   font-size: 2em;   text-align: center; } class ContactForm extends React.Component{   constructor(props) {     super(props);     this.state = {       name: '',       email: '',     };     this.handleInputChange = this.handleInputChange.bind(this);     this.handleSubmit = this.handleSubmit.bind(this);   }   handleInputChange(event){     const target = event.target;     const value = target.type === 'checkbox'? target.checked : target.value;     const name = target.name;     this.setState({       [name]: value     })     console.log('Change detected. State updated' + name + ' = ' + value);        }   handleSubmit(event){     alert('A form was submitted: ' + this.state.name + ' // ' + this.state.email);     event.preventDefault();   }   render() {     return (                                     Inventory             Name                                             Storage Type                                             Max Item Capacity                                             Resources             Resource Name                                             Max Number of Resources                                             Current Number of Resources                                         )   }      } class MainTitle extends React.Component {   render(): React.ReactNode {     return(       Add Inventory     )   } } class App extends React.Component{   render(){     return(                                 )   }      }

Please fix this error. Using react.js. Also there will be submit button, after click submut button then will back, edit, and delete button. Show screenshot 

Using react.js, create a inventory page where screen will display  Inventory: Name Storage Type Max Item Capacity Resources: Resource Name Resource Type Max Number of Resources Current Number of Resources

body {

  padding: 30px 20%;

}

h1 {

  font-size: 2em;

  text-align: center;

}

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

class ContactForm extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      email: '',
    };
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleInputChange(event){
    const target = event.target;
    const value = target.type === 'checkbox'? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    })
    console.log('Change detected. State updated' + name + ' = ' + value);
    
  }
  handleSubmit(event){
    alert('A form was submitted: ' + this.state.name + ' // ' + this.state.email);
    event.preventDefault();
  }
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <div className="form-group">
            <h1> Inventory </h1>
            <label for="nameInput">Name</label>
            <input type="text" name="name" value= {this.state.name} onChange ={this.handleChange}
            className="form-control" id="nameInput" placeholder="Name" />
          </div>
          <div className="form-group">
            <label for="emailInput">Storage Type</label>
            <input name="email" type="email" value={this.state.email} onChange={this.handleChange}
            className="form-control" id="emailInput" placeholder="Stroage Type" />
          </div>
          <div className="form-group">
            <label for="nameInput">Max Item Capacity</label>
            <input type="text" name="email" value={this.state.name} onChange={this.handleChange}
            className="form-control" id="nameInput" placeholder="Max Item Capacity" />
          </div>
          <div className="form-group">
            <h1> Resources </h1>
            <label for="nameInput">Resource Name</label>
            <input type="text" name="name" value={this.state.name} onChange={this.handleChange}
            className="form-control" id="nameInput" placeholder="Resource Name" />
          </div>
          <div className="form-group">
            <label for="nameInput">Max Number of Resources</label>
            <input name="text" name="email" value={this.state.name} onChange={this.handleChange}
            className="form-control" id="nameInput" placeholder="Max Number of Resources" />
          </div>
          <div className="form-group">
            <label for="nameInput">Current Number of Resources</label>
            <input type="text" name="name" value={this.state.name} onChange={this.handleChange}
            className="form-control" id="nameInput" placeholder="Current number of Resources" />
          </div>
        </form>
      </div>
    )
  }
    
}
class MainTitle extends React.Component {
  render(): React.ReactNode {
    return(
      <h1> Add Inventory </h1>
    )
  }
}
class App extends React.Component{
  render(){
    return(
      <div>
        <MainTitle/>
        <ContactForm/>
      </div>
    )
  }
    
}