ReactMarkdown is not displaying in React app

  javascript, reactjs

I’m trying to make a component that displays some simple markdown, but just can’t seem to get the markdown to display on the page. It’s not even creating a component for it in the HTML. I tried reinstalling my node_modules and that didn’t work, any tips?

import React, {useState, useEffect} from 'react'
import axios from 'axios';
import {API_DEV_URL, API_PROD_URL} from '../env';
import Markdown from 'react-markdown';

const ROOT = (process.env.REACT_APP_ENV === 'production')? API_PROD_URL : API_DEV_URL; 

function Hello() {
    const [test, setTest] = useState("");

    console.log(process.env.REACT_APP_ENV);

    useEffect(() => {
        axios.get(ROOT+'/test')
        .then(res => setTest(res.data))
        .catch(err => console.log(err));
    }, []);

    const input = '# This is a headernnAnd this is a paragraph'

    return (
        <header>
            <h1>Test</h1>
            <Markdown source={input}/>
        </header>
    );
}

export default Hello;

Source: Ask Javascript Questions

LEAVE A COMMENT