Ayush Srivastava
Ayush Srivastava

Reputation: 174

Fetch tinymce editor content from database in reactjs frontend

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;

about page component image

Please guide me.

Upvotes: 1

Views: 585

Answers (1)

First solution : You can use

    <div
  dangerouslySetInnerHTML={{
    __html: p.description
  }}></div>

Second solution Use react-html-parser

Upvotes: 1

Related Questions