'Markdown' cannot be used as a JSX component.

[teplostanski]

error TS2786: 'Markdown' cannot be used as a JSX component.
  Its type 'typeof import("/data/data/com.termux/files/home/test-ink/node_modules/ink-markdown/build/index")' is not a valid JSX element type.


24 render(<Markdown>{text}</Markdown>);

What could be the problem?

[teplostanski]

That's how it works.

import React from 'react';
import { render, Text } from 'ink';
import dedent from 'dedent';
import {parse, setOptions} from 'marked';
import TerminalRenderer, { TerminalRendererOptions } from 'marked-terminal';

type Props = TerminalRendererOptions & {
  children: string;
};

function Markdown({ children, ...options }: Props) {
  setOptions({ renderer: new TerminalRenderer(options) });
  return <Text>{parse(children).trim()}</Text>;
}

const text = dedent`
  # Hello

  This is **markdown** printed in the \`terminal\`
`;

render(<Markdown>{text}</Markdown>);

[diego-rapoport]

Sorry but I couldn't understand the relation between how it works and if that solves the problem or not. I'm having the same issue right now and I sincerely don't know what to do. Could somebody help me?
Just to clarify I'm trying to render markdown from data comming from JSON so it's inside a map function and I don't know if that makes the solution any different.

[Giancarlo1021]

Bumping because I am facing a similar issue.