Display markdown file from path in react with typescript

Question

I'm trying to create some routes to different .md files in my react/typescript app.

My App.tsx has this:

<Router>
  <main>
    <nav className="navbar navbar-expand-md navbar-light bg-white sticky-top px-3">
      <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span className="navbar-toggler-icon"></span>
      </button>
      <div className="collapse navbar-collapse flex-row-reverse" id="navbarSupportedContent">
        <ul className="navbar-nav mb-2 mb-lg-0">
          <li className="nav-item">
            <a className="nav-link active" href="/#About">About</a>
          </li>
          <li className="nav-item">
            <a className="nav-link active" href="/FirstDoc">FirstDoc</a>
          </li>
          <li className="nav-item">
            <a className="nav-link active" href="/SecondDoc">SecondDoc</a>
          </li>
         </ul>
       </div>
     </nav>
     <Routes>
       <Route path="/" element={<Home />}></Route>
       <Route path="/FirstDoc" element={<FIFI />}></Route>
       <Route path="/SecondDoc" element={<SESE />}></Route>
     </Routes>

     <div className="row row-cols-sm-1 py-5 m-0 text-center">
       <hr className="my-4"/>
       <div className="col p-3">
         <p className="m-0">This is my footer</p>
       </div>
     </div>
   </main>
 </Router>

I'm importing FirstDoc and SecondDoc from a file called MdFiles.tsx that looks like this:

import React, {FC} from "react"
import ReactMarkdown from 'react-markdown'

const fifiDoc = "./docs/FirstDoc.md"
const seseDoc = "./docs/SecondDoc.md"

const FIFI: FC = () => {
  return(
    <ReactMarkdown children={fifiDoc} />
  );
}

const SESE: FC = () => {
      
  return(
    <ReactMarkdown children={seseDoc} />
  );
}

export {FIFI, SESE};

I want my app to display de .md content inside the routes container but when it runs it shows the docs' paths as is

e.g.

Header with nav

./docs/FirstDoc.md

Footer

and

Header with nav

./docs/SecondDoc.md

Footer

because is taking them as a string.

I need it to get the text that is inside the paths related files and display it, I would love to write all the content when I'm creating const fifiDoc and const seseDoc but is very long and will be better to import it from the .md files.

I'll appreciate your help.

Thanks in advance

Alexander Kosykh · Accepted Answer · 2021-12-22 23:23:30Z

2

You can try this code:

const [text, setText] = useState('')
useEffect(()=>{
const firstPath = require("./firstDoc.md");

  fetch(firstPath)
    .then(response => {
      return response.text()
    })
    .then(text => setText(text))
},[])

Then pass this text to the component with children prop.

<ReactMarkdown children={text} />

or

<ReactMarkdown>{text}</ReactMarkdown>

And check out these article. Play around with promises and file uploads to react. I'm sure you will succeed.

edited Dec 22, 2021 at 23:23

answered Dec 22, 2021 at 23:16

Alexander Kosykh

3811 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

auphynne Over a year ago

(not OP) not sure why but I got a Proxy error when using your method for getting firstPath and didn't feel like figuring out why (my setup uses react & express), so I used import firstPath from "./firstDoc.md"); and it worked.

jfcabreras Over a year ago

Woked for me, just did some adjustments and in my case, I had to add .default when using fetch

Collectives™ on Stack Overflow

Display markdown file from path in react with typescript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related