How to render button onClick function in reactjs using react-markdown

Question

I am trying to alert a button in react-markdown.

This is the code below:

import React, {useState, useEffect} from "react";
import {useNavigate} from "react-router-dom";
import '../App.css';
import ReactMarkdown from "react-markdown";
import remarkGfm from 'remark-gfm'
import rehypeRaw from "rehype-raw"



function App() {

  const navigate=useNavigate()

  const handleClick=(e)=>{
    alert("Hello")
    e.preventDefault()
  }
  
    
  const source = `

  # Plugin

  <button onClick=${handleClick}> Click Me </button>
  
  `

  return (
    <div className="App">
      
      <ReactMarkdown children={source} rehypePlugins={[rehypeRaw]} remarkPlugins={[remarkGfm]} />
        
    </div>
  );
}


export default App

After visiting the url I am getting either like this:

<button onClick=e => { alert("Hello"); e.preventDefault(); }> Click Me

or alert button keeps popping.

someone please help.

Markdown won’t render embedded react components. Instead you will likely need to use mdx — evolutionxbox, Aug 02 '22 at 19:38
@evolutionxbox yes Ive been trying to do mdx but idk why i cannot use mdx react-markdown component. ill look into it again .... — Abdullah Roshan, Aug 02 '22 at 19:55

score 0 · Answer 1 · answered Aug 02 '22 at 19:45

0

Please try this approach

<button onClick={(e)=>{alert('I am Alert')}>
  Click Me
</button>

answered Aug 02 '22 at 19:45

Kevin Macwan

56
4

Yes I tried this instead on the browser it shows like this ``` – Abdullah Roshan Aug 02 '22 at 19:51

How to render button onClick function in reactjs using react-markdown

1 Answers1