add new component addPlant removed functionality before

imports/ui/AddPlant.jsx

@@ -0,0 +1,68 @@
+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);
+        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   
+    }
+
+    
+
+    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={(e)=>this.setState({name:e.target.value})} />
+                    </Form.Group>
+                    <Form.Group>
+                        <Form.Label>Type:</Form.Label>
+                        <Form.Control 
+                            as="select"
+                            type="text"
+                            id="type"
+                            value={this.state.type}
+                            onChange={(e)=>this.setState({type:e.target.value})}
+                        >
+                            <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;
+

imports/ui/Settings.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-
+import AddPlant from './AddPlant'
 import { Button, Form, Container, Row, Col, Table } from 'react-bootstrap';
 
 class Settings extends React.Component{
@@ -7,20 +7,20 @@ class Settings extends React.Component{
     constructor(props){
         super(props);
         this.state = {
-            name: '',
-            type: '',
-            dirt: '',
             plants: [],
             types: ['Chile', 'Mint'], // hardcoded for now
-            dirts: ['Vegetable Soil', 'Potting Soil'], // hardcoded for now
-            updateId: -1,
-            btnName: 'submit'
         }
     }
 
-    componentDidMount(){
+    // pass this function to the addplant comp as a prop
-        // fetch data from db here
+    addPlant = (plant) => {
-        
+        plant.id = Math.random(); // rework
+
+        let plants = [...this.state.plants, plant]; // create a copy of the array and add the new plant to it
+
+        this.setState({
+            plants: plants
+        })
     }
 
     render(){
@@ -38,50 +38,7 @@ class Settings extends React.Component{
 
                     <br></br>
 
-                    {
+                    <AddPlant addPlant={this.addPlant} typeArray={this.state.types}></AddPlant>
-                        this.state.updateId >= 0 | this.state.plants.length === 0? // show the form only if we edit the plant or there is no plant set yet
-                        <Form onSubmit={this.handleSubmit}>
-                            <Form.Group controlId="exampleForm.ControlInput1">
-                                <Form.Label>Name</Form.Label>
-                                <Form.Control
-                                    type="text"
-                                    value={this.state.name}
-                                    autoFocus ref={(input) => {this.nameInput=(input)}}
-                                    placeholder="plant"
-                                    onChange={(e)=>this.setState({name:e.target.value})} />
-                            </Form.Group>
-                            <Form.Group controlId="exampleForm.ControlSelect1">
-                                <Form.Label>Type</Form.Label>
-                                <Form.Control 
-                                    as="select"
-                                    type="text"
-                                    value={this.state.type}
-                                    onChange={(e)=>this.setState({type:e.target.value})}
-                                >
-                                    <option></option>
-                                    {this.state.types.map((type, index) => {
-                                        return <option key={index} value={type}>{type}</option>
-                                    })}
-                                </Form.Control>
-                            </Form.Group>
-                            <Form.Group controlId="exampleForm.ControlSelect1">
-                                <Form.Label>Dirt</Form.Label>
-                                <Form.Control 
-                                    as="select"
-                                    type="text"
-                                    value={this.state.dirt}
-                                    onChange={(e)=>this.setState({dirt:e.target.value})}
-                                >
-                                    <option></option>
-                                    {this.state.dirts.map((dirt, index) => {
-                                        return <option key={index}>{dirt}</option>
-                                    })}
-                                </Form.Control>
-                            </Form.Group>
-                                <Button type={"submit"}>{this.state.btnName}</Button>
-                        </Form>
-                        :null
-                    }
                     
 
                     <Row className="justify-content-md-center">
@@ -109,8 +66,6 @@ class Settings extends React.Component{
                                             <td>{plant[0]}</td>
                                             <td>{plant[1]}</td>
                                             <td>{plant[2]}</td>
-                                            <td><Button type={"button"} onClick={() => this.editItem(plant[0], plant[1], plant[2], index)}>Edit</Button></td>
-                                            <td><Button type={"button"} onClick={() => this.removeItem(plant)}>Delete</Button></td>
                                         </tr>
                             })
                         }
@@ -125,57 +80,6 @@ class Settings extends React.Component{
         );
     }
 
-    // search for arrow function for further syntax knowledge
-    handleSubmit = (e) => {
-        e.preventDefault();
-        if (this.state.updateId >= 0) { // check if it is in edit mode
-            this.state.plants[this.state.updateId][0] = this.state.name;
-            this.state.plants[this.state.updateId][1] = this.state.type;
-            this.state.plants[this.state.updateId][2] = this.state.dirt; // updates the name of the plant
-            this.setState({
-                updateId:-1, // Todo check docu
-                name:'', // reset inputtext again
-                btnName:'submit' // reset button to submit again
-            })
-        } else {
-            let newDataElement = [
-                this.state.name,
-                this.state.type,
-                this.state.dirt
-            ]
-            console.log("name " + newDataElement[0])
-            console.log("type " + newDataElement[1])
-            console.log("dirt " + newDataElement[2])
-            this.setState(prevState =>({
-                plants:[...prevState.plants, newDataElement], // adds a new plant array
-                name:'' //to reset the inputfield
-            }))
-            return this.state.plants;
-        }
-        
-    }
-    
-
-    removeItem = (value) => {
-        this.setState({
-            plants:this.state.plants.filter((plant) => { // filter function add docu
-                return plant !== value;
-            }),
-            name:''
-        })
-    }
-
-    editItem = (editedName, editedType, editedDirt, index) => {
-        this.setState({
-            name:editedName,
-            type:editedType,
-            dirt:editedDirt,
-            btnName:'update',
-            updateId:index // should be edited to a boolean
-        })
-    }
-
-
 }
 
 export default Settings;