React not rendering - Cannot read property of undefined

Question

I'm having trouble with the first render of my application. I know the issue is because initially my 'const name' is undefined. When I set it to something such as a string, the app will load, and then I can put the original code back in and the app will work like it's supposed to. But if I refresh, I get the error again. Here is my code:

const HomePage = (props) => {
    const name  = props.name.newMovement.movementName;
    const displayMovementButtons = () => {
        if (!name) {    
            return (
                <div className={classes.noMovementsMessage} >Click add button to begin</div> 
            )
        }

        return (
            <Button 
                className={classes.movementButtons}
                onClick={() => history.push('/movement/:id')}
            >   
                <div className={classes.movementName} >{name}</div>
            </Button>
        )
    };

So, 'name' is what starts off as undefined. How can I restructure my code so that it will do the initial render?

Abir Taheer · Accepted Answer · 2021-05-20 23:18:43Z

1

Either props.name or props.name.newMovement is undefined. If you're working with async data it's likely that the name property hasn't been set at the time of the initial render. You can try Optional chaining so that your component doesn't immediately throw an error when the name property isn't defined.

const name  = props.name?.newMovement?.movementName;

answered May 20, 2021 at 23:18

Abir Taheer

2,8533 gold badges16 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

StarshipladDev · Accepted Answer · 2021-05-20 23:18:59Z

0

Try {name ? name : ""} This checks if name is null. If so, it prints "" , otherwise it prints whatever name is

answered May 20, 2021 at 23:18

StarshipladDev

1,1436 silver badges17 bronze badges

Collectives™ on Stack Overflow

React not rendering - Cannot read property of undefined

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related