Please fix this error. Using react.js 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   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(                                 )   }      }

Database System Concepts
7th Edition
ISBN:9780078022159
Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Chapter1: Introduction
Section: Chapter Questions
Problem 1PE
icon
Related questions
Question

Please fix this error. Using react.js

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

 

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>
    )
  }
    
}

Expert Solution
trending now

Trending now

This is a popular solution!

steps

Step by step

Solved in 3 steps with 1 images

Blurred answer
Knowledge Booster
Files and Directory
Learn more about
Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.
Similar questions
  • SEE MORE QUESTIONS
Recommended textbooks for you
Database System Concepts
Database System Concepts
Computer Science
ISBN:
9780078022159
Author:
Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:
McGraw-Hill Education
Starting Out with Python (4th Edition)
Starting Out with Python (4th Edition)
Computer Science
ISBN:
9780134444321
Author:
Tony Gaddis
Publisher:
PEARSON
Digital Fundamentals (11th Edition)
Digital Fundamentals (11th Edition)
Computer Science
ISBN:
9780132737968
Author:
Thomas L. Floyd
Publisher:
PEARSON
C How to Program (8th Edition)
C How to Program (8th Edition)
Computer Science
ISBN:
9780133976892
Author:
Paul J. Deitel, Harvey Deitel
Publisher:
PEARSON
Database Systems: Design, Implementation, & Manag…
Database Systems: Design, Implementation, & Manag…
Computer Science
ISBN:
9781337627900
Author:
Carlos Coronel, Steven Morris
Publisher:
Cengage Learning
Programmable Logic Controllers
Programmable Logic Controllers
Computer Science
ISBN:
9780073373843
Author:
Frank D. Petruzella
Publisher:
McGraw-Hill Education