CODEWITHSUNDEEP
javascriptreactjs
Ma Ross
Ma Ross

Reputation: 27

React.JS Nothing was returned from render

I am new to React and want to do my first steps but get stuck on a probably very basic error. I did read the other threads to this topic, but I could not derive a solution for my problem out of them. Please help! Thank you!

Error Message

Uncaught Error: MyTable(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

index.html

<!DOCTYPE html>
<html>
    <head>
        
    </head>
    <body>
    <div id="content">
    </div>
    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
     <!-- Load our React component. -->
    <script src="myTableNOjsx.js" type="text/babel"></script>
    </body>
</html>

myTableNOjsx.js

class MyTable extends React.Component {
  constructor(props) {
      super(props);
  }
      
  render(){ 
  return
    React.createElement("table", null,
        React.createElement("tr", null, 
            React.createElement("td", null, "${this.props.first}"), 
            React.createElement("td", {style: "text-align: right"}, "${this.props.second}")
        )
    )
   ;
  }
}

ReactDOM.render(
  React.createElement(MyTable, {first: "erste", second: "zweite"}, null),
  document.getElementById('content')
);

EDIT: <script src="myTableWITHjsx.js" to <script src="myTableWITHjsx.js"

Upvotes: 1

Views: 351

Answers (4)

Dario Fern&#225;ndez
Dario Fern&#225;ndez

Reputation: 149

The problem is you were actually returning nothing. This is the correct syntax for your return statement:

    render(){ 
      return(
        React.createElement("table", null,
            React.createElement("tr", null, 
                React.createElement("td", null, `${this.props.first}`), 
                React.createElement("td", {style: {textAlign: "right"}}, `${this.props.second}`)
            )
        )
      )  
    }

Also notice that you where using template literals with " but you need to use backticks: ``

You also are using styles as strings. In React, styles are objects style: { width: "100%" }

Upvotes: 0

Ravikumar
Ravikumar

Reputation: 2205

Here is the corrected code working fine.

  1. As @Alastair mentioned you shouldn't move return statement to new line.
  2. You have to enclose template literals with ``.
  3. style attribute syntax is wrong, you've to use it like object.

class MyTable extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return React.createElement("table", null,
      React.createElement("tr", null,
        React.createElement("td", null, `${this.props.first}`),
        React.createElement("td", {
          style: {
            textAlign: "right"
          }
        }, `${this.props.second}`)
      )
    );
  }
}

ReactDOM.render(
  React.createElement(MyTable, {
    first: "erste",
    second: "zweite"
  }, null),
  document.getElementById('content')
);
<!DOCTYPE html>
<html>

<head>

</head>

<body>
  <div id="content">
  </div>
  <!-- Load React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <!-- Load our React component. -->
  <script src="myTableNOjsx.js" type="text/babel"></script>
</body>

</html>

Upvotes: 0

Sowam
Sowam

Reputation: 1756

Change

 return
    React.createElement("table", null,
        React.createElement("tr", null, 
            React.createElement("td", null, "${this.props.first}"), 
            React.createElement("td", {style: "text-align: right"}, "${this.props.second}")
        )
    )

to

return (
  <table>
    <tr>
      <td>{`${this.props.first}`}</td>
      <td>{`${this.props.second}`}</td>
    </tr>
  </table>
)

I don't know why you are using createElement for just displaying table...

Upvotes: 0

Alastair
Alastair

Reputation: 1800

Remove the new line between return and React.createElement. A new line after return will return undefined and ignore the subsequent code, as is happening here.

See why it is happening (Automatic Semicolon Insertion) here:

The return statement is affected by automatic semicolon insertion (ASI). No line terminator is allowed between the return keyword and the expression. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/return#automatic_semicolon_insertion

Upvotes: 1

Related Questions