Insert element into child components in React

Question

In my React project, I have a third-party pre-compiler which generate multiple <p> elements based on markdown input. Now, I wish to add some custom content at the beginning of the first paragraph, but this is not supported by the third-party content provider. I want to know whether there is a method of inserting into a child component (or at least imitate the appearance using CSS).

For example, I want to implement a component that displays the following

Remark 1: markdown content goes here...

where I am provided with a third-party component <Markdown /> that renders the markdown content in an array of <p> tags.

I do not want to use the CSS ::before pseudo-element, because I want to use React to manage the content being inserted, instead of writing it as a raw string in the content CSS property.

I am currently thinking of using a React Portal to render the extra text into a <span> tag outside the DOM and insert it into the first <p> tag I find when my component mounts. However, I am not sure whether there are better methods to implement this.

Answer 1

I had a similar issue using react-markdown.

I wanted to implement drop caps (see https://sunknudsen.com/privacy-guides/spoof-anonymize-your-mac-address-and-hostname-automatically-at-boot-on-macos).

Spent hours trying to figure out how to do this. Ended up using a span.

See Is it possible to apply CSS only to first letter of first paraphraph but only if paraphraph first child is text vs an element such as span?

# Spoof (anonymize) your MAC address and hostname automatically at boot on macOS

![macbook](macbook.jpg)

> Unfortunately this guide does not work on Macs equipped with the new T2 chip running macOS Mojave. If that’s your case, please upgrade to Catalina.

<span class="drop-cap">E</span>very network adapter (the physical hardware used to connect to Wi-Fi access points) has its very own (and very unique) identifier called a [MAC address](https://en.wikipedia.org/wiki/MAC_address). It looks something like this: `00:0C:29:5B:14:B3`.