Reactjs - Submitting multiple lines from one textarea - arrays

Question

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.
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.
In my code the state of names is an empty string, but I think it would be easier/more manageable if it were an array.
Thanks!
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) => {
e.preventDefault();
}
handleChange = (e) => {
this.setState({
names: e.target.value
});
}
render() {
return (
<section className="flex">
<div className="content flex">
<div className="sandbox flex">
<div className="directions">
<h1>Please enter a list of names.</h1>
<h3>Select a langauge at the top of the page.</h3>
</div>
<form id="nameForm" className="names flex">
<div className="form-group">
<textarea
id="names"
name="hard"
value={this.state.names}
cols={20}
rows={20}
onChange={this.handleChange}
wrap="hard">
</textarea>
</div>
</form>
<button id="formButton" form="nameForm" type="submit">Submit</button>
<div className="nametags flex">
<div className="nametags-group flex">
<button type="button" className="nametag">{this.state.names}</button>
<p className="greeting">Hello there, happy to see you back!</p>
</div>
<div className="nametags-group flex">
<button type="button" className="nametag">John Doe</button>
<p className="greeting">Hello there, happy to see you back!</p>
</div>
</div>
</div>
</div>
</section>
)
}
}
export default Content;

Answer 1

This code should work perfectly for you:
import React, { Component } from 'react'
class Content extends Component {
constructor(props) {
super(props)
this.state = {
names: ''
}
this.handleSubmit = this.handleSubmit.bind(this)
this.handleChange = this.handleChange.bind(this)
}
handleSubmit = name => {
alert(`Submitted name: ${name}`)
}
handleChange = e => {
this.setState({
names: e.target.value
})
}
render() {
return (
<section className="flex">
<div className="content flex">
<div className="sandbox flex">
<div className="directions">
<h1>Please enter a list of names.</h1>
<h3>Select a langauge at the top of the page.</h3>
</div>
<form id="nameForm" className="names flex">
<div className="form-group">
<textarea
id="names"
name="hard"
value={this.state.names}
cols={20}
rows={20}
onChange={this.handleChange}
wrap="hard"
/>
</div>
</form>
<button id="formButton" form="nameForm" type="submit">
Submit
</button>
<div className="nametags flex">
<div className="nametags-group flex">
{this.state.names
.split('\n')
.filter(n => n) // to filter out empty names
.map((name, index) => (
<button
key={index}
type="button"
className="nametag"
onClick={() => this.handleSubmit(name)}
>
{name}
</button>
))}
<p className="greeting">Hello there, happy to see you back!</p>
</div>
</div>
</div>
</div>
</section>
)
}
}
export default Content
I think it's easier to keep the name state as string.
When rendering the names, split the string at \n, filter out the empty names (basically those extra newlines without names), and render the rest.
When clicking on those name buttons, call handleSubmit and pass name as argument.
So the rest to do is what you want to do with those names in handleSubmit.

Answer 2

Something like this:
handleChange = e => {
this.setState({
names: e.target.value,
submitNames: e.target.value.split(/\r?\n/)
});
};
And change how you display buttons:
{ this.state.submitNames.map(
(name) =>
<button
onClick={() => this.handleSubmit(name)}
type="button"
className="nametag"
>
{name}
</button>
)}