-1

I am creating a react website by create-react-app. I have some markdown files in current directory. I want to preview them in the website (like github shows markdown files in preview format). I've found markdown previewer ReactMarkdown. Now the only code I need is a React functional/class component that will read markdown files. I've tried some solutions in stackoverflow but none of them worked.

This is my App.js

import ReactMarkdown from 'react-markdown';
import ReadFileData from './ReadFileData';
import data from './file.md'; 
// const data = require('./file.md');
import './App.css';

function App() {
  return (
    <div className="App">
      <ReactMarkdown><ReadFileData data={data}/></ReactMarkdown>
    </div>
  );
}

export default App;

I've wrote a small part of ReadFileData.js. But I don't know how to complete it.

import React from "react";

class ReadFileData extends React.Component {

  render(){

    const unparsed = this.props.data;

    console.log(unparsed);

//  The code I need

    const readAbleData = "unknown";

    return(
        <div>
            <p>{readAbleData}</p>
        </div>
    );
  }
}

export default ReadFileData;
KasRoudra
  • 315
  • 4
  • 8
  • Does this answer your question? [How to read text file in react](https://stackoverflow.com/questions/55830414/how-to-read-text-file-in-react) – Ergis Nov 20 '21 at 17:36
  • @Ergis Nope. There are 4 answers. For 1st answer, I don't even find where should I write filename. I tried 2nd and 3rd but they didn't worked resulting white blank page. The rest is not properly a React Component. I think that question is different from my one – KasRoudra Nov 20 '21 at 17:52

1 Answers1

1

You can read it with fetch:

const myMarkdownFile = require("./file.md");

fetch(myMarkdownFile)
  .then(response => response.text())
  .then(text => this.setState({ text }))
timewastingprofessional
  • 608
  • 5
  • 11