Reputation: 174
I create my about page data dynamic using Laravel and reactjs. I need to fetch my TinyMCE editor content from the database in my react js frontend application. It fetches but with an HTML tag. I need to fetch it without an HTML tag. My backend API is in Laravel Please help me.
my component code is
import React, {useState, useEffect} from 'react';
import Menu from './Menu';
import Footer from './Footer';
import {getAboutPage} from "./apiCore";
const About = () => {
const [getAboutContent, setAllAboutContent] = useState([]);
const loadAllAboutContent = () => {
getAboutPage().then(data => {
if(data.error){
console.log(data.error)
} else{
setAllAboutContent(data.data)
console.log(data.data)
}
});
};
useEffect(() =>{
loadAllAboutContent();
}, [])
return(
<div>
<Menu/>
{/* {JSON.stringify(getAboutContent)} */}
{getAboutContent.map((p, i) => (
<div>
<div className="slider_area">
<div className="single_slider about_bg_1 d-flex align-items-center" style={{background: `url(${"http://localhost:8000/storage/uploads/abouts/"+p.banner})`}}>
<div className="container">
<div className="row">
<div className="col-12">
<div className="slider_text">
<h3>{p.banner_text}</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="about_desc">
<div className="container">
<div className="row justify-content-center ">
<div className="col-lg-12 col-md-10">
<div className="section_title text-center">
<h4>{ p.description}</h4>
</div>
</div>
</div>
</div>
</div>
</div>
))}
<Footer/>
</div>
)
}
export default About;
Please guide me.
Upvotes: 1
Views: 585
Reputation: 89
First solution : You can use
<div
dangerouslySetInnerHTML={{
__html: p.description
}}></div>
Second solution Use react-html-parser
Upvotes: 1