added ItemForm

src/components/items/ItemForm.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import {Form, Button} from 'react-bootstrap'
+
+const ItemForm = props => {
+  console.log(props)
+  return (
+    <Form onSubmit={props.handleSubmit}>
+      <Form.Group controlId="formBasicEmail">
+        <Form.Label>Enter Item Here</Form.Label>
+        <Form.Control value={props.itemText} onChange={props.updateItemText} />
+      </Form.Group>
+      <Button variant="dark" type='submit'>Submit Item</Button>
+    </Form>
+  )
+}
+
+export default ItemForm

src/components/items/ItemList.js

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import ItemRow from './ItemRow'
 const ItemList = props => {
   const { items } = props

src/components/items/Items.js

@@ -1,20 +1,18 @@
 import React from 'react'
 import ItemList from './ItemList'
-import {Container, Row, Col, Table} from 'react-bootstrap'
+import {Table, Row, Col} from 'react-bootstrap'
 
 const Items = props => {
   const { items } = props
+  if(items.length===0) return <div>No Items Found.</div>
   return (
-    <Container className="mt-5">
-      <Row><Col><h3>Items</h3></Col></Row>
-      <Row><Col><Table striped bordered hover>
-        <thead><tr>
-          <th>#</th>
-          <th>Item</th>
-        </tr></thead>
-        <ItemList items={items} />
-      </Table></Col></Row>
-    </Container>
+    <Table striped bordered hover>
+      <thead><tr>
+        <th>#</th>
+        <th>Item</th>
+      </tr></thead>
+      <ItemList items={items} />
+    </Table>
   )
 }
 

src/components/items/index.js

@@ -1,3 +1,4 @@
 export { default as Items } from './Items'
 export { default as ItemList } from './ItemList'
 export { default as ItemRow } from './ItemRow'
+export { default as ItemForm } from './ItemForm'

src/components/main.js

@@ -1,12 +1,24 @@
 import React, { Component } from 'react'
 import axios from 'axios'
-import { Items } from './items'
+import { Items, ItemForm } from './items'
 import {Container, Row, Col} from 'react-bootstrap'
 
+const Error = () => {
+  return (
+    <Row><Col>
+      {`Hello! The client is working correctly, but no API was found.\n
+You can still submit items to the table, but they won't persist
+after refreshing the page.`}
+    </Col></Row>
+  )
+}
+
 class App extends Component {
   constructor() {
     super()
-    this.state = { loading: true }
+    this.state = { loading: true, items: [], itemText: '' }
+    this.updateItemText = this.updateItemText.bind(this)
+    this.handleSubmit = this.handleSubmit .bind(this)
   }
 
   componentDidMount() {
@@ -23,18 +35,32 @@ class App extends Component {
     }
   }
 
-  renderData() {
-    return <Items {...this.state} />
+  updateItemText(e) {
+    e.preventDefault()
+    console.log(e.target.value, this.state.itemText)
+    this.setState({itemText: e.target.value})
   }
 
-  renderApiNotFound() {
-    return <Container className="mt-5"><Row/><Row><Col/>
-      <Col>Hello! The client is working correctly, but no API was found.</Col>
-      <Col/></Row></Container>
+  handleSubmit(e) {
+    e.preventDefault()
+    console.log(e.target.value)
   }
+
+  renderData() {
+    return (
+      <>
+      <Container fluid className="mt-5">
+        <Row><Col sm={3}>
+          <ItemForm itemText={this.state.itemText} handleSubmit={this.handleSubmit} updateItemText={this.updateItemText}/>
+          <div className="mt-5">{this.state.apiNotFound ? <Error/> : ''}</div>
+        </Col><Col sm={8}><h3>Items</h3><Items {...this.state} /></Col></Row>
+      </Container>
+      </>
+    )
+  }
+
   render() {
     if (this.state.loading) return <div />
-    if(this.state.apiNotFound) return this.renderApiNotFound()
     if (this.state.items) return this.renderData()
     return <div />
   }