Inside the render method

JavaScript
1

Hi, I’m really confused about the line inside the render method and before the return statement, is that a JS code or JSX code? because he accepts the HTML tags,
Thank you

Your code so far


class MyComponent extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    name: 'freeCodeCamp'
  }
}
render() {
  // change code below this line
  const name=<h2>this.state.name</h2>;
  // change code above this line
  return (
    <div>
      { /* change code below this line */ }
      {name}
      { /* change code above this line */ }
    </div>
  );
}
};

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36.

Challenge: Render State in the User Interface Another Way

Link to the challenge:
https://www.freecodecamp.org/learn/front-end-libraries/react/render-state-in-the-user-interface-another-way

2

It is neither valid JS or JSX.

It is best to put the HTML tags (i.e <h2>) in the return statement and assign the state property values to the variable.

EDIT: I stand corrected. I should have tested the code first before posting. @lasjorg is correct.

1 Like
3

Wouldn’t the fact that it is creating an element make it JSX?

It is the same as const name = React.createElement("h2", null, "this.state.name"); you can see the output using babel.

You are however missing the curly braces so it will just have this.state.name as the text context in the element (should be {this.state.name}).


2 Likes
4

I see my students struggle with this logic a lot. Maybe this will be helpful for you:

In class components, you need to have a render method with an explicit return value. However, the space between render and return is a place where you’d typically save any variables or console.logs. What you are seeing is a variable with a JSX statement which includes an header tag with the name taken from the state.

5