Please fix those errors.
Please fix those errors.
import React from 'react';
class ContactForm extends React.Component {
constructor(props) {
super(props);
this.state = {
name: '',
storageType: '',
maxItem: '',
resourceName: '',
maxResource: '',
resourceType: '',
currentResource: '',
display: false
};
this.handleNameChange = this.handleNameChange.bind(this);
this.handleStorageTypeChange = this.handleStorageTypeChange.bind(this);
this.handleMaxItemChange = this.handleMaxItemChange.bind(this);
this.handleResourceNameChange = this.handleResourceNameChange.bind(this);
this.handleResourceTypeChange = this.handleResourceTypeChange.bind(this);
this.handleMaxResourceChange = this.handleMaxResourceChange.bind(this);
this.handleCurrentResourceChange = this.handleCurrentResourceChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleNameChange(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);
}
handleStorageTypeChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
this.setState({
storageType: value
})
}
handleMaxItemChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
this.setState({
maxItem: value
})
}
handleResourceNameChange(event) {
this.setState({
resourceName: event.target.value
})
}
handleResourceTypeChange(event) {
this.setState({
resourceType: event.target.value
})
}
handleMaxResourceChange(event) {
this.setState({
maxResource: event.target.value
})
}
handleCurrentResourceChange(event) {
this.setState({
currentResource: event.target.value
})
}
handleSubmit() {
this.setState({
display: true
})
}
displayButtons() {
const back = <div>
<input type="button" onClick={this.handleSubmit} value="Back" />
<input type="button" onClick={this.handleSubmit} value="Edit" />
<input type="button" onClick={this.handleSubmit} value="Delete" /></div>
return back;
}
render() {
return (
<div>
<form>
<div className="form-group">
<h1> Inventory </h1>
<label for="nameInput">Name</label>
<input type="text" name="name" value={this.state.name} onChange={this.handleNameChange}
className="form-control" id="nameInput" placeholder="Name" />
</div>
<div className="form-group">
<label for="storageType">Storage Type</label>
<input name="storage" type="text" value={this.state.storageType} onChange={this.handleStorageTypeChange}
className="form-control" id="storageType" placeholder="Storage Type" />
</div>
<div className="form-group">
<label for="nameInput">Max Item Capacity</label>
<input type="text" name="maxItem" value={this.state.maxItem} onChange={this.handleMaxItemChange}
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="resourceName" value={this.state.resourceName} onChange={this.handleResourceNameChange}
className="form-control" id="nameInput" placeholder="Resource Name" />
</div>
<div className="form-group">
<label for="nameInput">Resource Type</label>
<input name="resourceType" value={this.state.resourceType} onChange={this.handleResourceTypeChange}
className="form-control" id="nameInput" placeholder="Resource Type" />
</div>
<div className="form-group">
<label for="nameInput">Max Number of Resources</label>
<input name="maxResource" value={this.state.maxResource} onChange={this.handleMaxResourceChange}
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="currentResource" value={this.state.currentResource} onChange={this.handleCurrentResourceChange}
className="form-control" id="nameInput" placeholder="Current number of Resources" />
</div>
<input type="button" onClick={this.handleSubmit} value="Submit form" />
{this.state.display ? this.displayButtons() : ''}
</form>
</div>
)
}
}
class MainTitle extends React.Component {
render() {
return (
<h1> Add Inventory </h1>
)
}
}
export default class App extends React.Component {
render() {
return (
<div>
<MainTitle />
<ContactForm />
</div>
)
}
}
Step by step
Solved in 3 steps with 2 images
