I'm trying to pass a variable in return of a ponent. Here is my code:

const Obj = (props) => {

    let { propId } = useParams();
    
    const [data, setData] = useState({ course: [] });

    useEffect(() => {
        (async () => {
            const result = await axios.get(
                '/' + propId
            ).catch(err => {
                console.error(err);
            });
            setData(result.data);
        })();
    }, [propId]);
    
    return (
        <Fragment key={propId}>
            <div>
                {data.htmlContent}
            </div>
        </Fragment>
    );
};

export default Obj;

At here it shows this:

<p>Lorem ipsum dolor sit amet</p>

How can I insert this html content to main content?

I'm trying to pass a variable in return of a ponent. Here is my code:

const Obj = (props) => {

    let { propId } = useParams();
    
    const [data, setData] = useState({ course: [] });

    useEffect(() => {
        (async () => {
            const result = await axios.get(
                'http://example./api/v1/' + propId
            ).catch(err => {
                console.error(err);
            });
            setData(result.data);
        })();
    }, [propId]);
    
    return (
        <Fragment key={propId}>
            <div>
                {data.htmlContent}
            </div>
        </Fragment>
    );
};

export default Obj;

At here it shows this:

<p>Lorem ipsum dolor sit amet</p>

How can I insert this html content to main content?

• javascript
• html
• reactjs

• I actually get <p>Lorem ipsum dolor sit amet</p> – sundowatch Commented Aug 25, 2020 at 19:43
• you passing html , it's not JSX. when you create html tags on react, it's actually a react elements, where is different from the html you get from the request. you need to convert it to a react element – zb22 Commented Aug 25, 2020 at 19:44
• Then, how can I convert this to JSX? – sundowatch Commented Aug 25, 2020 at 19:44
• stackoverflow./questions/40108843/… – Behrouz Pooladrak Commented Aug 25, 2020 at 20:10
• you can use "html-to-react" library npmjs./package/html-to-react – zb22 Commented Aug 25, 2020 at 20:21

1 Answer 1

Try the dangerouslySetInnerHTML attribute :

 <Fragment key={propId}>
            <div dangerouslySetInnerHTML={ { __html: data.htmlContent}} >
           
            </div>
        </Fragment>