React is showing “Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render”

Question

Heres the main game.js and app.js file:

//Heres the game file//

import React, { Component } from "react";

class Game extends Component {
  constructor(props) {
    super(props);
    this.state = { num: 0 };
    this.numPicker = this.numPicker.bind(this);
  }
  numPicker(e) {
    let rand = Math.floor(Math.random() * this.props.maxNum);
    return rand;
  }
  render() {
    return (
      <div>
        <h1>Hellow World {this.numPicker}</h1>
      </div>
    );
  }
}

export default Game;



//Heres the main file://


import React from "react";

import "./App.css";
import Game from "./game";

function App() {
  return (
    <div className="App">
      <Game maxNum={1} />
    </div>
  );
}

export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

on the game.js file I used the numPicker function inside an H1. Now I am getting this error:

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

Answer 1

You need to invoke the numPicker function that returns a data which can then be rendered

<h1>Hellow World {this.numPicker()}</h1>