Beginner here. This error keeps popping up, and I can't figure out why. My webpage does show changes that I make to the script, but only when I comment out the style to hide the shape, or keep it in to show a shape.

I'm wanting to create a webpage that, every second, changes the appearance of the shape by its size, border radius ('perCent'), and the background colour.

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Timed Shapes</title>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> 

    <style>
        .shape-item{
            padding: 10px;
            margin: 20px;
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: blue; 
            border-radius: 50%;  
        }   
    </style>
</head>
<body>
    <div class="shape-item">
        <div></div>
        <div></div>
    </div>

    <script type="text/babel">

        "use strict";

        var colours = ["#77b3d1", "#E94F37", "#1C89BF", "#A1D363", "#85FFC7", "#297373", "#FF8552", "#A40E4C", "#85AFC0", "#296573", "#AA8552", "#CC0E4C", "#567187", "#c6c976", "#967c64", "#e497ed", "#d24cff", "#e2ceb1", "#cc999e", "#97bf9a"];

        class Shapes extends React.Component{

            constructor(props){
                super(props);
                this.state = {
                    shape: {
                        bgColour: colours[Math.floor((Math.random() * colours.length))],
                        size: 100,
                        perCent: "%50"
                    }
                }
            }

            componentDidMount(){
                this.timerID = setInterval(() => this.updateShape(), 1000);
            }

            componentWillUnmount(){
                clearInterval(this.timerID);
            }

            updateShape(){
                let randomIndex = Math.floor((Math.random() * colours.length));
                this.setState(
                    {
                        shape: {
                            bgColour: colours[Math.floor((Math.random() * colours.length))],
                            size: (Math.random() * 125),
                            perCent: (Math.random() * 100)
                        }
                    }
                )
            }

            render(){
                var shapeStyle = {
                    padding: 10,
                    margin: 20,
                    display: 'inline-block',
                    backgroundColor: {this:state.bgColour},
                    borderRadius: {this:state.perCent},
                    width: {this:state.size},
                    height: {this:state.size}
                }
                return(
                    <div style={shapeStyle}>
                        {this.state.shape}
                    </div>
                )
            }
        }

        ReactDOM.render(<Shapes />, document.querySelector(".shape-item"));

        shapesRender = [];

        for(let i=0; i < 60; i++){
            shapesRender.push(<Shapes key={i} />);
        }

        ReactDOM.render(shapesRender, document.querySelector(".shape-item"));

    </script>
</body>
</html>

```