CODEWITHSUNDEEP
reactjs
James
James

Reputation: 461

Why is this React State Returning as Undefined?

I'm getting the following error in my React Component:

Failed to compile.

./src/components/GameInfo.js
Line 13:  'isPlaying' is not defined  no-undef

Search for the keywords to learn more about each error.

But I have that state defined in the same file, here's the whole thing:

import React from 'react';
import { Layer, Stage } from 'react-konva';
import { connect } from 'react-redux';
import Banner from './Banner.js';
import CurrentTetromino from '../containers/CurrentTetromino.js';
import ActiveTetrominos from '../containers/ActiveTetrominos.js';
import gameConstants from '../gameConstants.js';
import style from '../styles/styles.css';

const { fieldHeight, fieldWidth } = gameConstants;

let GameField = ({ isPlaying, isPaused, isGameOver }) => {
if (isPlaying) {
    return (
        <div style={{display: 'inline'}}>
            <div className={style.gameField}>
                <Stage width={fieldWidth} height={fieldHeight}>
                    <Layer>
                        <CurrentTetromino />
                        <ActiveTetrominos />
                    </Layer>
                </Stage>
                { isPaused ? <Banner label="PAUSED" color="black" opacity=".5" /> : null}
            </div>
            { isGameOver ? <Banner label="GAME OVER" color="red" opacity=".8" /> : null}
        </div>
    );
}
return null;
};

const mapStateToProps = ({ gameStatus }) => ({
isPlaying: gameStatus !== 'IDLE',
isPaused: gameStatus === 'PAUSED',
isGameOver: gameStatus === 'GAME_OVER',
});

GameField = connect(mapStateToProps)(GameField);

export default GameField;

I imagine the error that's causing this will also return similarly for isPaused and isGameOver.

I'm not sure why it's not picked up those consts in mapStateToProps. Unfortunately with React, it really only tells me the line which the error is occurring (line 13).

Any advice would be greatly appreciated.

Upvotes: 0

Views: 110

Answers (2)

James
James

Reputation: 461

In classic programming fashion, I had a typo 'IsPLaying' instead of 'IsPlaying'.

Thank you for the help!

Upvotes: 0

Gabriel
Gabriel

Reputation: 641

This dumb site won't let me comment but I would check that gameStatus is going through ok in your mSTP. Instead of doing the implicit return I would change it explicit and console.log the gameStatus in your mSTP. Or slap a debugger in there. That would be my first instinct to check.

const mapStateToProps = ({ gameStatus }) => {
   console.log(gameStatus);
   return { 
      isPlaying: gameStatus !== 'IDLE',
      ....
   }
}

If you could share what that brings up I can probably help you out more. otherwise good luck and hopefully that helps figure out the issue.

Upvotes: 1

Related Questions