Reactjs - Submitting multiple lines from one textarea

JavaScript
1

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;
2

Assuming that names is the list, this should work:

let names = "some name\nsome name 2";
let namesSplit = names.split(/\r?\n/);
console.log(names);
console.log(namesSplit);

Output:

some name
some name 2
[ 'some name', 'some name 2' ]

You can read about \n and \r here:


But /\r?\n/ regex will pretty much match both \r\n and \n.
Is this what you looking for?

4

Thanks for your help!

There was an issue with how the dev tools displayed the state containing the textarea values but everything seems to work now!

Thanks again!

5

You should not split it on handleChange event though. Split actual input into different state\variable, and process it only when it is actually submitted. Otherwise you will be splitting input into array for no reason on each change.

6