How can I remove elements from colon so it will be rendered as react JSX not strings

Question

I requested for a file from a POSTGRES DB through a get request so I can render in my react application, but react renders it as normal string instead of html element or JSX.

In the code I stored the file in a redux store which I later passed as props to the component that will render it. but it rendered a stringed version of the file.

code is down below (for parent component passing prop down to child ArticleContent component):

const ArticleCnt = () => {  
let dispatch = useDispatch()
let {article} = useSelector(s => s.articleContent);
let [file, setFile] = useState(" ");
let location = useLocation();

axios.get("http://localhost:2003/article", {
    params: {
        id: location.pathname.split("/")[1]
    }
})
.then(({data}) => {
    dispatch(setArticleContentTo(data))
})
.catch((err) => console.log("Error Occured Here: ", err.message))
.finally(() => {
    let doc = article;

    
    setFile(doc)
})


const containerVariants = {
    hidden: {
        x: "100vw"
    },
    visible: {
        x: 0,
        transition: {
            duration: .6
        }
    },
    exit: {
        x: '-100vw',
        transition: {
            duration: .6,
            delay: 2
        }
    }
} 

return (
    <motion.div className="app-main" variants={containerVariants} exit="exit" initial="hidden" animate="visible">
        <ArticlePanel />

       
        <div className="app-container">
            
            <ArticleHeader />
            <ArticleThumbnail />
            <ArticleInfo />
            
            <div className="app-article-cnt">
                <ArticleContent articleFile={file} />
                <ArticleComment /> 
            </div>
           
            
        </div>
        
    </motion.div> 
 );}

code is down below (for child component rendering prop as html content):

const ArticleContent = ({articleFile}) => {

const [isPending, setIsPending] = useState(true); 

useEffect(() => {
    console.log(articleFile)
    if(true){
        setIsPending(false);
        
    }else{
        setIsPending(true);
    }
   
}, [articleFile]); 
return ( 
    <div className="app-article-content">
        {
            isPending &&

            <>
                <div>
                    <h1>
                        <Skeleton />
                    </h1>
                    <Skeleton count={50} /> 
                </div>
            
            </>
            
        }
        {
            ! isPending &&
            articleFile
        }
    </div>
);}

Does this answer your question? [ReactJS convert HTML string to JSX](https://stackoverflow.com/questions/19266197/reactjs-convert-html-string-to-jsx) — Konrad, Mar 07 '23 at 12:54
I think you are not using `redux` the way it is meant to be used, you are dispatching and action to save it to the `redux` store and then in the same component you are getting the value and passing it as a prop, wouldn't it be more logical to use `useSelector` in the `ArticleContent` component? — Lars Vonk, Mar 07 '23 at 12:54

score 0 · Answer 1 · answered Mar 07 '23 at 13:33

0

I actually solved the problem with the dangerouslySetInnerHTML react property which is made special for html elements rendering. Read more here

answered Mar 07 '23 at 13:33

Chinedu Fabian

71
5

How can I remove elements from colon so it will be rendered as react JSX not strings

1 Answers1