How to get 'breaks' from input\textArea in Reactjs?

Question

In project I get input\\text-area values from e.target write them to component state and send in request. But I need also to send text breaks('\\n'). How to get them, write to state and send in react?

Answer 1

Have a function called handleChange and pass it to your input as an onChange attribute.

<input onChange={handleChange} />

Your function will be passed the event argument by default, all you have to do is define it.

handleChange(event) {
    this.setState({input_value: event.target.value})
}

The react docs are probably the best I've ever seen for any library.

https://reactjs.org/docs/handling-events.html

Not sure what you mean by sending text breaks.

Answer 2

You can preserve line-breaks with CSS:

white-space: pre-wrap;

so in react it would look something like this:

    import React from 'react'
    export default class Text extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          value: '',
          submit: false
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
      }

      handleChange(event) {
        this.setState({value: event.target.value});
      }

      handleSubmit(event) {
        this.setState({submit: true})
        event.preventDefault();
      }

      render() {

        const submittedText = 
            this.state.submit ? <textarea id="" name="" cols="30" rows="10">{this.state.value}</textarea>:null
        return (
          <>
          <form onSubmit={this.handleSubmit}>
            <label>
              TEXT:
              <textarea style={{'whiteSpace':'preWrap'}} type="text" value={this.state.value} onChange={this.handleChange} />
            </label>
            <input type="submit" value="Submit" />
          </form>
          {
            submittedText
          }
          </>
        );
      }
    }