React, cannot read this.props, when using style object

Question

I can't figure out why but I get 'Uncaught reference error: props is not defined' thrown by Babel but I can't see anything wrong with the code, unless something changed. Clearly I'm having some completely silly blind spot.

Here is the code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Am I nutty:</title>

    <!-- React JS JS 16.12.0 -->
    <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
    <!-- React JS DOM JS 16.12.0 -->
    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
    <!-- Babel JS .6.26.0 -->
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>

<body>

    <div id="container"></div>


    <script type="text/babel">

        var letterStyle = {
            padding: 10,
            margin: 10,
            backgroundColor: this.props.bgcolor,
            color: "#333",
            display: "inline-block",
            fontFamily: "monospace",
            fontSize: 32,
            textAlign: "center"
        }

        class Letter extends React.Component {
            render() {
                return (
                    <div style={letterStyle}>
                        {this.props.children}
                    </div>
                );
            }
        }

        ReactDOM.render(
            <div>
                <Letter bgcolor="#333">A</Letter>
                <Letter bgcolor="#333">B</Letter>
                <Letter bgcolor="#333">C</Letter>
                <Letter bgcolor="#333">D</Letter>
            </div>, document.querySelector("#container")
        )

    </script>

</body>

</html>

kind user · Accepted Answer · 2019-11-17 19:21:19Z

2

The letterStyle variable is outside scope of your class, it does not point to class scope, but to the window object, which apparently does not have a props method or variable specified.

I would suggest you to move that variable into the class, so it actually would have access to props.

class Letter extends React.Component {
    render() {
        const letterStyle = {
           padding: 10,
           margin: 10,
           backgroundColor: this.props.bgcolor,
           color: "#333",
           display: "inline-block",
           fontFamily: "monospace",
           fontSize: 32,
           textAlign: "center"
        };

        return (
            <div style={this.letterStyle}>
                {this.props.children}
            </div>
        );
    }
}

Note: In some rare cases you'd probably want to use some basic memoization or just move that letterStyle variable outside the render method, so the children does not re-render excessively.

answered Nov 17, 2019 at 19:21

kind user

42k8 gold badges69 silver badges78 bronze badges

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

2 Comments

Thomas James Thorstensson Over a year ago

There we have it. Total blind spot here, too many espressos. Thanks for sorting.

faizan baig Over a year ago

@ThomasThorstensson I think this should be the accepted answer

Alan Lal · Accepted Answer · 2019-11-18 06:03:31Z

0

Your class should be like as follows. Class components should always call the base constructor with props.


class Letter extends React.Component {
           constructor(props){
             super(props)
           }
            render() {

           var letterStyle = {
            padding: 10,
            margin: 10,
            backgroundColor: this.props.bgcolor,
            color: "#333",
            display: "inline-block",
            fontFamily: "monospace",
            fontSize: 32,
            textAlign: "center"
            }

                return (
                    <div style={letterStyle}>
                        {this.props.children}
                    </div>
                );
            }
        }

In your code , props are not being passed like above. Hence you get the cannot read this.props error.

You should check this out on using react class components.

edited Nov 18, 2019 at 6:03

answered Nov 17, 2019 at 19:19

Alan Lal

1472 silver badges8 bronze badges

2 Comments

Thomas James Thorstensson Over a year ago

I can't believe I missed this. Thanks!

Alan Lal Over a year ago

Glad to help :)

Collectives™ on Stack Overflow

React, cannot read this.props, when using style object

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related