br is a void element tag and must neither have children nor use dangerouslySetInnerHTML.

[vedraj360]

I am fetching readme.md file from git repo and when I get response I add it react markdown this error shows up.

this is my error

Error: br is a void element tag and must neither have children nor use dangerouslySetInnerHTML.
in br (created by VirtualHtml)
in VirtualHtml (created by ReactMarkdown)
in p (created by ReactMarkdown)
in div (created by Root)
in Root (created by ReactMarkdown)

The repo I am fetching is https://github.com/Chrisvin/BlobBackgroundLayout/blob/master/README.md

This is my code.

  useEffect(() => {
    if (!loading) {
      let git = gitInfo(gitLink);
      getGitInfo(git.username, git.repositoryname)
        .then((res) => {
          if (res != null) {
            setGitResponse(res.data);
            // console.log(res.data);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    }
    
  }, [loading, gitLink]);

 <ReactMarkdown
          className="projectDetail__markdown"
          escapeHtml={false}
          transformImageUri={(uri) => checkURI(uri, gitLink)}
          source={markDown}
          // astplugins={[toc]}
          renderers={{ code: CodeBlock, table: TableWrapper }}
          // plugins={[toc]}
        />

/*
codeblock is like code wrapper it detects the code backticks and table wrapper is used to wrap the rendered table into the div block.

/*
 ** Check image from the markdown text is correct or not or convert according to requirement.
 @param uri
 ? return formated uri

 */
const checkURI = (uri, gitLink) => {
  if (
    uri.includes("shields.io") ||
    uri.includes("jitpack.io") ||
    uri.includes("travis-ci.org") ||
    uri.includes("codecov.io") ||
    uri.includes("api.bintray.com") ||
    uri.includes("api.codacy.com")
  ) {
    return uri;
  } else if (uri.startsWith("/") || uri.startsWith("./")) {
    let x = uri.split(".com");
    let y = `https://raw.githubusercontent.com` + x[1];
    let z = y.replace("/blob", "");
    return z;
  } else if (uri.includes("https://raw.githubusercontent.com")) {
    return uri;
  } else if (!uri.includes("http") || !uri.includes("https")) {
    let split = gitLink.split("/");
    let userUri = "/" + split[3] + "/" + split[4] + "/master/" + uri;
    let y = `https://raw.githubusercontent.com/` + userUri;
    return y;
  } else if (uri.startsWith("https://github.com/")) {
    let x = uri.split(".com");
    // console.log(x);
    let y = `https://raw.githubusercontent.com` + x[1];
    let z = y.replace("/blob", "");
    return z;
  }
  return uri;
};

[wooorm]

Please value our time: https://github.com/remarkjs/.github/blob/main/support.md

[vedraj360]

So, I have to use

const [reactContent, setMarkdownSource] = useRemark({
  remarkPlugins: [remarkMath],
  rehypePlugins: [rehypeKatex],
});
instead of 
<ReactMarkdown> </ReactMarkdown>

[wooorm]

If you want to properly parse HTML, that sounds nice yeah! ReactMarkdown isn’t a proper HTML parser

[vedraj360]

Thanks for your time again and help. It was nice to talk to you. +repo

[wooorm]

Awesome @vedraj360, good luck in your open source / development career! Have fun!

[ChristianMurphy]

So, I have to use

const [reactContent, setMarkdownSource] = useRemark({
  remarkPlugins: [remarkMath],
  rehypePlugins: [rehypeKatex],
});
// instead of 
<ReactMarkdown> </ReactMarkdown>

assuming you are referring to remarkjs/react-markdown#428 or https://github.com/ChristianMurphy/react-remark
no, both still offer a component API, but additionally offer a hooks API if you prefer.