.Render React on the Server with renderToString

Tell us what’s happening:

Hi everybody,How are you?I am good.Can you tell me what is wrong with with this exercise and why is
wrong that code that i write?I am trying to find the wrong but I can’t.

Your code so far


class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <div/>
  }
};

// change code below this line
ReactDOMServer.renderToString('App');

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.92 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/render-react-on-the-server-with-rendertostring

1 Like

When you are rendering a component. You need to have html like syntax like this.

<nameOfYourComponent />

1 Like

The instructions do not tell you the exact syntax, but it is similar to ReactDOM.render syntax:

ReactDOMServer.renderToString(element)

How do you refer to an element with ReactDOM.render? It will be the same format.

Hint: It is not a string like you are trying to do.

2 Likes

Ohhh I can’t find i try some codes but again is wrong.What can I do else to find it or can you tell me some more easy explain :slightly_smiling_face:

1 Like

What have you tried that is different than your first attempt?

I assume you already made it through the first 1-3 challenges in the React section. Go back and review how to render a component to the DOM. Then look at the hints you have been given and you should be able to figure out your mistake.

OK so I will try to find my wrong and I tell you.

class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return


}
};

// change code below this line
ReactDOMServer.renderToString();

This is my new code and is right thank you for helping.

You did not call the renderToString method with the App component. Like I said before, you should review previous
React challenges which you should have already passed to to see how a component is rendered with ReactDOM.render method.
https://learn.freecodecamp.org/front-end-libraries/react/render-a-class-component-to-the-dom

Thanks!, you’re right, the argument is not a string, and we have done similar challenge. so this like a reminder

I’ve hosted my Tic-Tac-Toe Game on local server on node.
I inspected the code before and after using the ReactDOMServer.renderToString(<Game />) but I found the empty HTML root element and a large bundle of Javascript.
I’ve used a normal approach and second approach as an experiment as such:

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);
ReactDOMServer.renderToString(<Game />);

and another as :

ReactDOM.render(
  ReactDOMServer.renderToString(<Game />),
  document.getElementById('root')
);

I’ve imported the ReactDOMServer from ‘react’ module which provides the renderToString method as said in the challenge.

import React from 'react';
import ReactDOMServer from 'react';

it leads me to TypeError: react__WEBPACK_IMPORTED_MODULE_0___default.a.renderToString is not a function
and even used another approach mentioned in the official doc:

import ReactDOMServer from 'react-dom/server';

The component gets rendered with a bundle and several scripts.
I must be missing something.