74 lines
2.2 KiB
JavaScript
74 lines
2.2 KiB
JavaScript
import React from 'react'
|
|
import { Button, Form, Container, Row, Col, Table } from 'react-bootstrap';
|
|
|
|
class AddPlant extends React.Component{
|
|
|
|
constructor(props){
|
|
super(props);
|
|
this.state = {
|
|
name: '',
|
|
type: ''
|
|
}
|
|
}
|
|
|
|
handleChange = (e) => {
|
|
// console.log(e.target.id, e.target.value); // e.target.id reference to the state which is changed
|
|
this.setState({
|
|
[e.target.id]: e.target.value
|
|
});
|
|
}
|
|
|
|
// search for arrow function for further syntax knowledge
|
|
handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
//console.log(this.state)
|
|
|
|
this.props.addPlant(this.state)
|
|
|
|
this.setState({ // reset state
|
|
name: '',
|
|
type: ''
|
|
})
|
|
}
|
|
|
|
|
|
|
|
render (){
|
|
return (
|
|
<>
|
|
<Form onSubmit={this.handleSubmit}>
|
|
<Form.Group>
|
|
<Form.Label>Name:</Form.Label>
|
|
<Form.Control
|
|
type="text"
|
|
id="name"
|
|
value={this.state.name}
|
|
autoFocus ref={(input) => {this.nameInput=(input)}}
|
|
placeholder="plant"
|
|
onChange={this.handleChange} />
|
|
</Form.Group>
|
|
<Form.Group>
|
|
<Form.Label>Type:</Form.Label>
|
|
<Form.Control
|
|
as="select"
|
|
type="text"
|
|
id="type"
|
|
value={this.state.type}
|
|
onChange={this.handleChange}
|
|
>
|
|
<option></option>
|
|
{this.props.typeArray.map((type, index) =>{
|
|
return <option key={index} value={type}>{type}</option>
|
|
})}
|
|
</Form.Control>
|
|
</Form.Group>
|
|
<Button type={"submit"}>Submit</Button>
|
|
</Form>
|
|
</>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default AddPlant;
|
|
|