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>
)
}
}
Step by step
Solved in 3 steps with 2 images
