react-markdown in react project

Question

I'm trying to make a markdown editor with React. I am using react-markdown library.

I wrote the same as the document, but the conversion does not work. When I check the element in devtools, the tag is changed normally.

What could be the problem?

// App.tsx

function App() {
  const [inputText, setInputText] = useState<string>('');

  const handleInputText = (e: ChangeEvent<HTMLTextAreaElement>) => {
    const { value } = e.target;
    setInputText(value);
  };
  return (
    <Container>
      <Header>
        <p>Simple Markdown Editor</p>
      </Header>
      <Wrapper>
        <Editor onTextChange={handleInputText} />
        <Result text={inputText} />
      </Wrapper>
    </Container>
  );
}

export default App;

// Editor.tsx

function Editor({ onTextChange }: { onTextChange: (e: ChangeEvent<HTMLTextAreaElement>) => void }) {
  return (
    <Wrapper>
      <TextareaAutosize autoFocus placeholder="Write here.." onChange={(e) => onTextChange(e)} />
    </Wrapper>
  );
}

export default Editor;

// Result.tsx

function Result({ text }: { text: string }) {
  return (
    <Wrapper>
      <ReactMarkdown remarkPlugins={[remarkGfm]}>{text}</ReactMarkdown> // this code
    </Wrapper>
  );
}

export default Result;

enter image description here

@YinPeng.Wei oh thanks! I used css reset. That's the problem. — Enjoywater, Feb 18 '23 at 11:30
@Enjoywater @Enjoywater I am also using the same react markdown. Can you please try using this way: `{text} ` — soccerway, Feb 19 '23 at 00:34
@soccerway I tried that, but it doesn't work. In my code, the markdown is not recognized correctly because it conflicts with the part that resets the css in the styled-component GlobalStyle. — Enjoywater, Feb 19 '23 at 12:10
@soccerway So I fixed the reset-css in , and it works fine. In the end the css overwriting was the problem. — Enjoywater, Feb 19 '23 at 12:10

react-markdown in react project

0 Answers0