5

Is it possible to get the actual “raw” jsx text wrapped by a Parent component (e.g. from props.children)?

Given this component:

<Parent>
    <Child name={'test'} />
</Parent>

question:

In Parent.js, can I do anything with this.props.children (or anything else) to get this (ideally as a string):

output:

"<Child name={'test'} />"

bilo-io
  • 597
  • 3
  • 17
  • 1
    Why do you want a string of it? Kind of seems like an XY problem – Andrew Li Nov 29 '17 at 12:59
  • maybe [this](https://stackoverflow.com/a/39800493/3148807) can help – Sagiv b.g Nov 29 '17 at 13:01
  • 2
    @Li357 the purpose of this is for a self-documenting page ... doing this makes it easier than having to copy the code. The string is used in combination with Highlight.js to display the source code – bilo-io Jan 23 '18 at 08:49
  • 1
    Did you ever solve this? I'm trying to do the exact same thing. – Josh M. Apr 25 '19 at 14:41
  • @JoshM. Did you solved this? I'm trying this too. – freesh Oct 15 '20 at 22:15
  • @freesh I'm importing the component itself normally, and then the actual text of the same component file like `import ContentSample from '!!file-loader!./content.tsx';` -- this gives the _path_ to the file. Then you can do a `GET` request for that path, and get the source of the component. So you can then render the actual component as well as display its source. – Josh M. Oct 16 '20 at 02:42

0 Answers0