title: React input form without form component?
body: <p>Im writing a "Todo" app to learn React, and this is my first app (it's using Rails as a backend). Currently I have two components that handle state, which is where im running into an issue.</p>
  
  <p>ListContainer holds the state for "Lists", and a "List" holds the state for individual ListItems. Right now Lists work just fine, however I want to add a simple input box for my "List" component that can quickly add a new ListItem to the List. Currently im able to add a "test" value just fine.</p>
  
  <p>One way would be to make a ListItemForm component, but that seems so unnecessary to just send one value. Im more of a backend person so im sure there is an easy way that's just not obvious. My javascript is also pretty rusty, so im sure it's riddled with errors.</p>
  
  <p>Anyways here is the <code>List</code> component:</p>
  
  <pre><code>import React, { Component } from 'react';
  import axios from 'axios';
  import ListItem from './ListItem';
  
  
  class List extends Component { 
      constructor(props){
          super(props)
          this.state = {
              listItems: []
          }
      }
  
      componentDidMount() {
          axios.get(`/api/v1/lists/${this.props.list.id}/list_items.json`)
          .then(response =&gt; {
              console.log("Getting List 'listitems'")
              console.log(response.data)
              console.log(this.state.listItems)
              this.setState({
                  listItems: response.data
              })
              console.log(this.state)
          })
          .catch(error =&gt; console.log(error))
      }
  
      addNewListItem = (list_id, content) =&gt; {
          axios.post(`/api/v1/lists/${list_id}/list_items`, {
              content: content
            })
          .then(response =&gt; {
              console.log(response)
              const listItems = [ ...this.state.listItems, response.data ]
              this.setState({listItems})
              console.log("state of list")
              console.log(this.state)
  
          })
          .catch(error =&gt; {
              console.log(error)
          })
      }
  
      removeListItem = (listItem_id) =&gt; {
          console.log("listItem_id :" + listItem_id);
          axios.delete(`/api/v1/list_items/${listItem_id}`)
          .then(response =&gt; {
              console.log(response);
              const listItems = this.state.listItems.filter(
                  listItem =&gt; listItem.id !== listItem_id
              )
              this.setState({listItems})
  
          })
          .catch(error =&gt; {
              console.log(error)
          })
      }
  
      render() {
          return (
              &lt;div className="single-list" key={this.props.list.id}&gt;
                  &lt;h4&gt;{this.props.list.title}&lt;/h4&gt;
                  &lt;p&gt;{this.props.list.description}&lt;/p&gt;
                  {console.log(this.props.list)}
                  {this.state.listItems.map( listItem =&gt; {
                      return &lt;ListItem key={listItem.id} listItem={listItem} removeListItem={this.removeListItem}/&gt;
                  })}
                  &lt;button onClick={() =&gt; this.props.onRemoveList(this.props.list.id)}&gt;Erase&lt;/button&gt;
                  &lt;button onClick={() =&gt; this.props.onUpdateList(this.props.list.id)}&gt;Update&lt;/button&gt;
                  &lt;button onClick={() =&gt; this.addNewListItem(this.props.list.id,"test")}&gt;Add&lt;/button&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default List;
  </code></pre>
  
  <p>I would like the field to be at the bottom and just be a text field with a button. Or is it as simple as having an input and attaching a submit button and <code>onClick</code> handler to send <code>e.target.value</code> to the <code>addNewListItem</code> function? Or am I overthinking this?</p>
  
  <p>Hopefully it makes sense to have the input form within the "List" component and not "ListItem"</p>