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;