title: Reactjs - Submitting multiple lines from one textarea
body: <p>I'm trying to allow a textarea to take a list of names and display the submission of names on the page. However, I want the user to only be able to submit one name per line.</p>
  
  <p>How would one go about this? More specifically, how would one grab the line breaks and split them into, say... an array to be mapped through and displayed in a dom element.</p>
  
  <p>In my code the state of <em>names</em> is an empty string, but I think it would be easier/more manageable if it were an array. </p>
  
  <p>Thanks!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class Content extends Component {
    constructor(props) {
      super(props);
      this.state = {
        names: ""
      };
  
      this.handleSubmit = this.handleSubmit.bind(this);
      this.handleChange = this.handleChange.bind(this);
    }
  
    handleSubmit = (e) =&gt; {
      e.preventDefault();
    }
  
    handleChange = (e) =&gt; {
      this.setState({
        names: e.target.value
      });
  
    }
  
    render() {
      return (
        &lt;section className="flex"&gt;
          &lt;div className="content flex"&gt;
  
            &lt;div className="sandbox flex"&gt;
              &lt;div className="directions"&gt;
                &lt;h1&gt;Please enter a list of names.&lt;/h1&gt;
                &lt;h3&gt;Select a langauge at the top of the page.&lt;/h3&gt;
              &lt;/div&gt;
  
              &lt;form id="nameForm" className="names flex"&gt;
                &lt;div className="form-group"&gt;
                  &lt;textarea
                    id="names"
                    name="hard"
                    value={this.state.names}
                    cols={20}
                    rows={20}
                    onChange={this.handleChange}
                    wrap="hard"&gt;
                  &lt;/textarea&gt;
                &lt;/div&gt;
              &lt;/form&gt;
  
              &lt;button id="formButton" form="nameForm" type="submit"&gt;Submit&lt;/button&gt;
  
              &lt;div className="nametags flex"&gt;
                &lt;div className="nametags-group flex"&gt;
                  &lt;button type="button" className="nametag"&gt;{this.state.names}&lt;/button&gt;
                  &lt;p className="greeting"&gt;Hello there, happy to see you back!&lt;/p&gt;
                &lt;/div&gt;
                &lt;div className="nametags-group flex"&gt;
                  &lt;button type="button" className="nametag"&gt;John Doe&lt;/button&gt;
                  &lt;p className="greeting"&gt;Hello there, happy to see you back!&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
        &lt;/section&gt;
      )
    }
  }
  
  export default Content;</code></pre>
  </div>
  </div>
  </p>