How to get the whole block of data using reactjs?
Question
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?
2 answers
solution1
1 ACCPTED 2020-03-21 06:00:11
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:
solution2
0 2020-03-21 05:57:14
If you want with break line like as it is in editor, add
<p>tag while concatination.changeBodyHandler = value => { let data =value.block; let text = ""; data.map(index => { text = text +"<p>" +index.text+"</p>"; }); this.setState({ body: text }); };And if you want to display the data in same way somewher use
dangerouslySetInnerHTML<div dangerouslySetInnerHTML={{__html: this.state.body}} />
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.