CODEWITHSUNDEEP
javascriptreactjs
Hysii
Hysii

Reputation: 772

Trying to enter a newline creates a comma instead

I'm trying to integrate some logic into my web application, which is written using React. I have a textArea component, imported from Semantic-UI, in which I'm trying to pull each new line and store into an array. Currently the textArea component only stores data as a string. 


render() {
  <Form.TextArea key={input.name} name={input.name} label={input.label} value={this.props.values[input.name] || ""} onChange={this.props.onChange}/>;

where value is a string separated by newline like:

test\ntesting\n123

I tried splitting on a every new line, using the code below, which stores the data in an array, like i desire. But this is replacing my attempts to create a new line [pressing ENTER] with a comma in the textArea, which is not my desire for UX.

value={this.props.values[input.name].split('\n')

My textArea component ends up looking something like this:

test,testing,123

where as my desired result is this:

test
testing
123

How can i achieve my desired textArea component UX while still storing the each new line in an array? Many thanks!

Upvotes: 2

Views: 1770

Answers (3)

Jordan Rolph
Jordan Rolph

Reputation: 1358

It's hard to tell what you're using the array for, and that might have an influence on the answer.

The easiest way would be to not store the text area's contents as an array, and instead store the value normally to state. If you need to e.g. send it as an array to some backend/db, you can then make the transformation when you send the data. For example:

state = {
  value: '',
};

...

onChange = (value) => this.setState({ value });

onSubmit = () => {
  const myValueArray = this.state.value.split('\n');
  // now make your network request with myValueArray
}

If you really need the array in state, one solution could be to simply duplicate your state by setting two state items when your onChange method gets called e.g. 

state = {
  value: "", // this is the actual text box value with /n characters
  valueArray: [], // this is your array where each newline is an item
};

...

onChange = (value) => {
  this.setState({ value, valueArray: value.split('\n')} );
};

Alternatively, you can join the array back when it gets passed to your component. The .join() method will join each array item, optionally inserting a string between each item. e.g.

<Form.TextArea ... value={this.props.values[input.name].join('\n')} />;

Note, depending on your use case, this way might have negative implications on performance

Upvotes: 0

Andres
Andres

Reputation: 1012

The problem is you're trying to assign value of type array to string prop. I guess, somewhere inside of your TextArea component array converted into a string. Since Array.prototype.toString method returns a string representing array items joined by comma, you have comma-separated string. You need to split your string only when you're sending it to back-end or using for some other logical purposes, but for TextArea component it's better to keep it as is.

Upvotes: 1

Mukesh Soni
Mukesh Soni

Reputation: 6668

If you only want the array to send it to a db or store in localStorage, you don't need to keep it in state. Keep the normal textarea value in state.

onChange={event => this.setState({ text: event.target.value}) }

When you want to send it to db, you can then convert it to array of strings

onSubmit: () => this.postToDb(this.state.text.split('\n'))

Upvotes: 1

Related Questions