Convert string React Component to jsx again

Question

I have one question, because read javascript file from NodeJS and send to the client and here I reveive all file as string (which is obvious) and here is my question. Is any solution to convert string component again to the jsx? This is no only html tags so dangerouslySetInnerHTML or similar methods don't work.

My string components looks like typical React component, something like that:

import React from 'react';
import { Row } from 'react-bootstrap;
import Home from './Home'
     ......
const Index = () => {
   const renderHelloWorld = <h1>Hello World</h1>

   return (
      <div>{renderHelloWorld}</div>
   )
}

export default Index;

So this is string I'm struggling with how convert it to jsx (maybe this is impossible) and I should use Server Side Rendering with React methodfs like ReactDOMServer?

May I ask why would you need to pass .js file as a plain text file? — Yevhen Horbunkov
– Yevhen Horbunkov, Commented Aug 17, 2020 at 7:02
Because user can upload file with code snippet to server and I would like render this file in the client. This is only for dev mode because I use create-react-app and this disable import files outside /src folder — Mat.Now
– Mat.Now, Commented Aug 17, 2020 at 7:15

Aravinda Meewalaarachchi · Accepted Answer · 2020-08-17 06:54:42Z

2

You can use just plain old JavaScript to do the trick.

document.querySelector('#elementToBeReplace').innerHTML = renderHelloWorld;

Another Option with react.js is use of dangerouslySetInnerHTML.

<div dangerouslySetInnerHTML={{ __html: renderHelloWorld }} />

Or You can use html-react-parser.

import Parser from 'html-react-parser';

const renderHelloWorld = <h1>Hello World</h1>

<div>{Parser(renderHelloWorld)}</div>

answered Aug 17, 2020 at 6:54

Aravinda Meewalaarachchi

2,6691 gold badge31 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

brijesh-pant · Accepted Answer · 2020-08-17 06:52:00Z

0

Try this library https://www.npmjs.com/package/react-html-parser.

A utility for converting HTML strings into React components. Avoids the use of dangerouslySetInnerHTML and converts standard HTML elements, attributes and inline styles into their React equivalents.

answered Aug 17, 2020 at 6:52

brijesh-pant

1,1851 gold badge12 silver badges20 bronze badges

Comments

Mat.Now · Accepted Answer · 2020-08-18 07:12:09Z

So, solution for my problem is very popular and simple (in early project stage), to understand problem and fix it we need to go back to the server part of the app. For React applications if we want render jsx file from the server, we have to use server side rendering and above problem will be gone. Maybe I show step by step how enable rendering React component in te server.

Configure backend to enable the ES6 features

Install babel packages

npm install @babel/core @babel/node @babel/preset-env @babel/preset-react --save-dev

There is many ways to configure Babel, I use the nearest package.json for this.

{
  ......,
  /*This have to be in the top level in package.json*/

  "babel":{
    "presets":[
      "@babel/preset-env",
      "@babel/preset-react" 
    ]
  }
}

More information about babel packages and configurations: https://babeljs.io/docs/en/

Send React component to the client

For this we have to install react and react-dom packages in server side

npm install react react-dom

For example in your server,js or route.js file:

 ....  //necesarry imported modules
 import ReactDOMServer from 'react-dom/server'
 import Index from './Index';

router.get('/exampleRoute', (req, res) => {

   .... //your route business logic

   res.send(ReactDOMServer.renderToString(<Index/>))
})

Render view in the client

...//correct React component
const[state, setState] = useState({Component: ''});

fetch('/exampleRoute')
 .then(response => response.json())
  .then(data => setState(state => ({...state, Component: data.data));

....

return(
  <div dangerouslySetInnerHTML={{ __html: state.Component }}></div>
)

This is only simple example how you can render React component from backend if this is necasarry. This is not guide for complex server side rendering in application which is more complicated thing, but no difficult thing.

Collectives™ on Stack Overflow

Convert string React Component to jsx again

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related