My JSON data contains HTML tags interspersed within it and I have successfully fetched and displayed the data. See the code snippet below:
componentDidMount() {
this._callCake();
}
_renderEachCake = () => {
return (
<EachCake
image={this.state.cake_object.image}
body={this.state.cake_object.body}
/>
);
};
_callCake = () => {
return fetch(`http://127.0.0.1:8000/api/cake/1`)
.then((response) => response.json())
.then(data => {
this.setState({cake_object : data})
})
.catch((err) => console.log(err))
}
render() {
return (
<div>
<Container>
<Row className="justify-content-center">
<Col><CakeHeader /></Col>
</Row>
<Row className="justify-content-center">
<Col>this._renderEachCake()</Col>
</Row>
</Container>
</div>
)
}
However, upon viewing the data on the screen, the HTML tags remain visible instead of being applied, as demonstrated below:
<p> <span style="font-size: 1rem;">This is how</span>all the text<span style="background-color: rgb(255, 255, 0);"> look like</span>
Unfortunately, I cannot utilize the replace() method as it would remove the HTML tags from the text. Any suggestions on how to resolve this issue? Thank you!