0

I have a JSON object with a property content which is an array.

Some elements in this array are regular strings, and some of them are <Link/> components from react-router-dom. eg: ["String1 ", "String2 ", "<Link to='/path'/>path</Link> ", etc]

At the moment react is rendering the literal string <Link to.../> where I want to render the Link component.

The row that is rendering the object is: <Row style={{ cursor: 'text' }}>{content}</Row>

Osama Rizwan
  • 615
  • 1
  • 7
  • 19
Tim
  • 5
  • 1
  • 4
  • Does this answer your question? [Reactjs convert html string to jsx](https://stackoverflow.com/questions/19266197/reactjs-convert-html-string-to-jsx) – mohit uprim Sep 24 '20 at 06:25
  • check this https://stackoverflow.com/questions/19266197/reactjs-convert-html-string-to-jsx – mohit uprim Sep 24 '20 at 06:25
  • @mohituprim i think it might answer it but im not sure how to implement it, ive change my `` but it hasnt changed what is rendered. – Tim Sep 24 '20 at 06:43
  • can you create demo in sandbox https://codesandbox.io/s/ckmrd – mohit uprim Sep 24 '20 at 08:42
  • Do you have the ability to actually pass the link component instead of representing it as a string? Because that would be a better way of doing this. – Matt G Sep 25 '20 at 03:52

2 Answers2

0

In your array you have the React Link element encapsulated by quotes. Anything put in quotes JavaScript will treat as the primitive string. What you are trying to do is probably render the React component with JSX. Simply remove the quotes (and also it seems there is an extra / after '/path'): path. This JSX code then gets converted to JavaScript at compilation and should render the component.

PenguinShade
  • 1
  • 1
    I dont put the quotes there myself, i am actually replacing the old content which is a string, splitting it with `str.split(' ')` and then conditionally replacing elements if they start with a '#' with a `` component. – Tim Sep 24 '20 at 06:51
0

For those seeing this post in the future, I ended up using react-string-replace to replace strings in my content with components which works without having to use dangerouslySetInnerHTML.

Tim
  • 5
  • 1
  • 4