CODEWITHSUNDEEP
javascriptruby-on-railsreactjswebpacker
Dillon Cortez
Dillon Cortez

Reputation: 176

React class not rendering

I'm trying to follow along with the reactjs tic tac toe tutorial, but when I try to render the pages and I have this code 


    import React from 'react'
    import ReactDOM from 'react-dom'
    import Game from '../components/Game'
    document.addEventListener('DOMContentLoaded', () => {
        ReactDOM.render(
            console.log("render is working"),
            <Game />,
            document.getElementById('root'),
        );
    })

and the Game class looks like 

    import React from 'react'
    import ReactDOM from 'react-dom'
    import Board from './Board'

    class Game extends React.Component {
        render() {
            console.log("Hooray, the game is working")
            return (
                <div className="game">
                    <div className="game-board">
                        <Board />
                    </div>
                    <div className="game-info">
                        <div>{/* status */}</div>
                        <ol>{/* TODO */}</ol>
                    </div>
                </div>
            );
        }
    }

    export default Game

The 'render is working prints to the console but the console log that says "Hooray, the game is working" doesn't show up, so it seems like the Game class isn't getting rendered for some reason. I'm using ruby on rails with the built in webpacker to load all the javascripts

Upvotes: 0

Views: 2570

Answers (5)

Hello World
Hello World

Reputation: 11

Your render should be as follows:

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

Assuming your child component is passed as 'export default Game' and your Id of your HTML base file is 'root'.

Render only takes two arguments. The first being the component being passed in and the second is the target in which it should place itself. You should only need to do this step at your 'index.js' file. Nowhere else.

Upvotes: 0

Aman
Aman

Reputation: 53

You need to remove the console log from the ReactDOM render call.

If I need to render in a component, I can do it as such.

<div>
  .....
  {console.log('Inline console in render method')}
</div>

Upvotes: 1

str8up7od
str8up7od

Reputation: 348

For one, why do you have your ReactDom.render(...) wrapped in that event listener? Two, why are you passing the ReactDom.render(...) a console.log()? It should only take two arguments: a component, and the element it should be appended to. Try removing the console.log() and if that still doesn't work, try removing the event listener that wraps your ReactDoom.render(...).

Upvotes: 1

Jonas Wilms
Jonas Wilms

Reputation: 138267

Cause calling console.log evaluates to undefined you are basically doing:

ReactDOM.render(
   undefined, // <- react component
   <Game />, // <- target 
   document.getElementById('root'), // < - useless
);

I'm surprised that ReactDOM.render is not throwing an error although you are passing completely useless arguments to it.

Upvotes: 1

mhatch
mhatch

Reputation: 4605

ReactDOM.render() takes 2 arguments: component, and mounting DOM element. You are passing a console.log for the first argument.

Upvotes: 1

Related Questions