How to get the whole block of data using reactjs?

Sandhya :

I've created a component which displays only block[0] value, it is not showing the whole block value.

For Example, if I write :

HI

Stackoverflow

It is showing only "Hi", It's not showing the full content of the field.

Can anyone help me in getting the whole data whatever I write in that input field?

import React from "react";
import { Editor } from "react-draft-wysiwyg";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
export default class Edit extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <div>
        <Editor value={this.props.value} onChange={this.props.onChange} />
      </div>
    );
  }
}

App component:

import React from "react";
import Body from "./Body";
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      body: ""
    };
  }
  changeBodyHandler = value => {
    console.log(value.blocks[0].text);
    this.setState({
      body: value.blocks[0].text
    });
  };

  render() {
    return (
      <div>
        <Body
          label="Body"
          name="body"
          value={this.state.body}
          onChange={this.changeBodyHandler}
        />
      </div>
    );
  }
}
export default App;

Here is the whole code:

"https://codesandbox.io/s/compassionate-tereshkova-89fm2"

Can anyone please help me with this?

keikai :

Each line to list, then map(), join() with \n would be fine

this.setState({ body: value.blocks.map(x => x.text).join("\n") });

import React from "react";
import Body from "./Body";
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      body: ""
    };
  }
  changeBodyHandler = value => {
    this.setState({ body: value.blocks.map(x => x.text).join("\n") });
  };
  render() {
    console.log(this.state.body);
    return (
      <div>
        <Body
          label="Body"
          name="body"
          value={this.state.body}
          onChange={this.changeBodyHandler}
        />
      </div>
    );
  }
}
export default App;

Try it online:

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=345960&siteId=1