Inside the render method

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) {
  this.state = {
    name: 'freeCodeCamp'
render() {
  // change code below this line
  const name=<h2></h2>;
  // change code above this line
  return (
      { /* change code below this line */ }
      { /* change code above this line */ }

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:

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

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

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

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


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.