React TypeScript: react-markdown no overload matches this call

Question

I'm happy to move to another library if needed but react-markdown seems to have good reports, however, im getting the below error when I try to use it with typescript in a functional component.

import React from 'react';
import Markdown from 'react-markdown';

const Home: React.FC = () => {

  const getMarkdown = async () => {
    const markdown = await fetch('../markdown/home.md');
    const text = await markdown.text();
    return text;
  }
  const src = getMarkdown();

  return (    
      <div className='max-width'>
          <span className='body'>
            <Markdown source={src} />
          </span>
      </div>
  );
}

export { Home };

the error I get is

No overload matches this call.
  Overload 1 of 2, '(props: Readonly<ReactMarkdownProps>): ReactMarkdown', gave the following error.
    Type 'Promise<Response>' is not assignable to type 'string'.
  Overload 2 of 2, '(props: ReactMarkdownProps, context?: any): ReactMarkdown', gave the following error.
    Type 'Promise<Response>' is not assignable to type 'string'.  TS2769

src is a promise not a string.

Joseph D.
– Joseph D.

2019-10-21 09:10:39 +00:00
Commented Oct 21, 2019 at 9:10 — Joseph D.
– Joseph D., Commented Oct 21, 2019 at 9:10
Thank's Joseph I added an await and got more errors

Bill
– Bill

2019-10-21 09:17:05 +00:00
Commented Oct 21, 2019 at 9:17 — Bill
– Bill, Commented Oct 21, 2019 at 9:17

MjZac · Accepted Answer · 2019-10-21 09:54:51Z

1

You can use react hooks

const Home = () => {
const [text, setText] = useState(null);
  useEffect(() => {
     async function getText() {
         const markdown = await fetch('../markdown/home.md');
         const text = await markdown.text();
         setText(text);
     }
     getText();
  }, []);
  return (<div className='max-width'>
          <span className='body'>
            <Markdown source={text} />
          </span>
      </div>);
}

answered Oct 21, 2019 at 9:54

MjZac

3,5541 gold badge20 silver badges30 bronze badges

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

6 Comments

Bill Over a year ago

This certainly cleared the error but the markdown doesn't render

MjZac Over a year ago

just verify if text is getting updated with markdown contents.

Bill Over a year ago

When I log text I dont see any of the content from home.md instead i see html from the site <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="

MjZac Over a year ago

My guess is that path to markdown file might be wrong, try with some online markdown file ( CORS might be an issue)

Bill Over a year ago

If I move the markdown folder to ./public then link to it, it works, thank you!

|

Collectives™ on Stack Overflow

React TypeScript: react-markdown no overload matches this call

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related