React, nested component with external component-CodePudding

I'm creating a documentation in React for an internal project. To help users to enter the good informations, I ask them some informations in beginning of the documentation such as their username or their machine's IP and save them in a cookie (we have no backend). These datas are display in the documentation to help them to configure their environment.

We also include some codes, command lines and configuration in yaml. To make the code more clear, I use React Syntax Highlighter. It works well except for on things and I don't find a work around: Sometime, the code include the Username or IP. But when I include the components to display these datas in the code, it's not display correctly.

Example:

const config_data = '# Maintainer\n\
MAINTAINER "'   <DisplayName />   '"\n\n\
# copy your file\n\
COPY ./test.test /usr/local/test.test';

class Test extends React.Component {
  render() {

    return(
      <div>
        <SyntaxHighlighter language="dockerfile">
          {config_data}
        </SyntaxHighlighter>
      </div>);
  }
}

The result will give me:

# Maintainer
MAINTAINER "[object Object]"

# copy your file
COPY ./test.test /usr/local/test.test

I find this issue which helped me to understand what happens but because the React Syntax Highlighter component is not mine, I can not (not in my knowledge at least) modify it. I also tried to get the data directly from the cookies to display the data directly but the result is the same.

I don't know if it's a bug of the component, if I can render my own component before to include it or if I missed something.

CodePudding user response：

You can use ReactDOMServer to convert the component into a string/markup.

import * as ReactDOMServer from 'react-dom/server';

const config_data = `# Maintainer\n\
MAINTAINER ${ReactDOMServer.renderToStaticMarkup(<DisplayName />)} \n\n\
# copy your file\n\
COPY ./test.test /usr/local/test.test`;