Creating Complex Components

kirupa · December 11, 2019, 9:56pm

In a previous article, we learned about components and all the awesome things that they do. We learned that components are the primary ways through which React allows our visual elements to behave like little reusable bricks that contain all of the HTML, JavaScript and styling needed to run themselves. Beyond reusability, there is another major advantage components bring to the table. They allow for composability. You can combine components to create more complex components.

This is a companion discussion topic for the original entry at http://www.kirupa.com/react/creating_complex_components.htm

Finnegan · April 8, 2017, 2:12am

Outstanding tutorial, outstanding writing.

You have by far the best tutorials for the React beginner that I’ve found. Keep up the great work!

kirupa · April 8, 2017, 2:53am

Thanks, Finnegan! Glad you find them useful. If there are additional topics that you would like me to cover, please let me know

nip90 · June 13, 2017, 5:12pm

Very good tutorial.
I’m stumbling on behavior I can’t explain.
If I’m using the following code, I see the square

	var Square = React.createClass({
		render: function() {
			
			return(
				<div>
			
				</div>
			);
		}
	});
	var Card = React.createClass({
	  	render: function() {
	      	var cardStyle = {
		        height: 200,
		        width: 150,
		        padding: 0,
		        backgroundColor: "#FFF",
		        WebkitFilter: "drop-shadow(0px 0px 5px #666)",
		        filter: "drop-shadow(0px 0px 5px #666)"
	        };
		    return (
		 		<div style={cardStyle}>
					
        		</div>
		    );
	    }
	});

	ReactDOM.render(
	<div>
		<Card/>
  	</div>,
  	document.querySelector("#container")
	);
</script>
</body>

However, If I use this code (omitting the Div in the square class), I see nothing

	var Square = React.createClass({
		render: function() {
			
			return(
			
			);
		}
	});
	var Card = React.createClass({
	  	render: function() {
	      	var cardStyle = {
		        height: 200,
		        width: 150,
		        padding: 0,
		        backgroundColor: "#FFF",
		        WebkitFilter: "drop-shadow(0px 0px 5px #666)",
		        filter: "drop-shadow(0px 0px 5px #666)"
	        };
		    return (
		 		<div style={cardStyle}>
					
        		</div>
		    );
	    }
	});

	ReactDOM.render(
	<div>
		<Card/>
  	</div>,
  	document.querySelector("#container")
	);
</script>
</body>

Why the Div matter if I do not reference the Square class at all?

Regards,
N.

kirupa · June 13, 2017, 6:07pm

The reason has to do with JSX being turned into regular JavaScript without knowing what code will be hit or not. When the Babel transpiler runs, it turns your first version of your code into this:

var Square = React.createClass({
	displayName: "Square",

	render: function render() {

		return React.createElement("div", null);
	}
});

When you don’t specify anything to return, you get an error because the render method must call React.createElement. Not having anything there causes an error like Unexpected Token or something equivalent.

bap · July 6, 2017, 9:36am

And in fact you can work around this by slightly modifying the example (and supporting prose) like this:

var Square = React.createClass({
	render: function() {
		
		return;
	}
});

As you can see I simply omited the parenthetical marks after the return which was empty context. Tested on both Chrome and electron (Chromium.) After doing this it transpiles and executes a-ok allowing you to check your work as you go rather than ‘all at the end.’

nbryson · August 26, 2017, 9:38pm

Hello, here is the code in between my script tags that I have and nothing is displaying. I have read and reread the example and explanation in the tutorial, but still can’t get it to work. Is there anything you can see here that would help point me in the right direction? I want to complete the tutorial but can’t get passed this stage. Help!

var Square = React.createClass({
render: function(){

var = squareStyle = {
	heght: 150,
	backgroundColor: this.props.color

}

};

return(
<div style={squareStyle}></div>
);

}

});



var Label = React.createClass({

render: function() {

var labelStyle = {
      fontFamily: "sans-serif",
      fontWeight: "bold",
      padding: 13,
      margin: 0
	  
return(
<p style={labelStyle}>{this.props.color}</p>
);

}

});



var Card = React.createClass({

render: function() {
var cardStyle = {
        height: 200,
        width: 150,
        padding: 0,
        backgroundColor: "#FFF",
        WebkitFilter: "drop-shadow(0px 0px 5px #666)",
        filter: "drop-shadow(0px 0px 5px #666)"
      };
return(
<div style={cardStyle}>
	
	<Square color={this.props.color}/>
    <Label color={this.props.color}/>
	</div>
);

}

});



ReactDOM.render(
      <div>
      <Card color="FF6699"/>
      </div>,
      document.querySelector("#container")
    );

kirupa · August 25, 2017, 3:42am

Is your console showing any errors? I don’t access to a laptop right now, but I can check in more detail tomorrow

nbryson · August 31, 2017, 6:21pm

I’ll look at this code again soon and get back to you. I appreciate your quick response. Thx!

nbryson · September 22, 2017, 10:33pm

Hi, there was an error, and I watched the video and worked through it. Thx! But I have into another snag in the “Dealing with State” section. There is another unexpected error in the console. I see the carrot, but don’t understand what exactly is the issue. I have the same exact code in the example. Can you point me in the right direction?

/////
class LightningCounter extends React.Component {
                constructor(props, context) {
                    super(props, context);
                     
                    this.state = {
                        strikes: 0
                    };
 
                    this.timerTick = this.timerTick.bind(this);
                }
 
                timerTick = () => {
                    this.setState({
                        strikes: this.state.strikes + 100
                    });
                }
 
                componentDidMount() 
                {
                    setInterval(this.timerTick, 1000);
                }
                 
                render() {
                    var counterStyle = {
                        color: "#66FFFF",
                        fontSize: 50
                    };
 
                    var count = this.state.strikes.toLocaleString();
 
                    return (
                        <h1 style={counterStyle}>{count}</h1>
                    );
                }
            }
 
            class LightningCounterDisplay extends React.Component {
                render() {
                    var commonStyle = {
                        margin: 0,
                        padding: 0
                    };
 
                    var divStyle = {
                        width: 250,
                        textAlign: "center",
                        backgroundColor: "#020202",
                        padding: 40,
                        fontFamily: "sans-serif",
                        color: "#999999",
                        borderRadius: 10
                    };
 
                    var textStyles = {
                        emphasis: {
                            fontSize: 38,
                            ...commonStyle
                        },
                        smallEmphasis: {
                            ...commonStyle
                        },
                        small: {
                            fontSize: 17,
                            opacity: 0.5,
                            ...commonStyle
                        }
                    }
 
                    return(
                        <div style={divStyle}>
                            <LightningCounter/>
                            <h2 style={textStyles.smallEmphasis}>LIGHTNING STRIKES</h2>
                            <h2 style={textStyles.emphasis}>WORLDWIDE</h2>
                            <p style={textStyles.small}>(since you loaded this example)</p>
                        </div>
                    );
                }
            }
 
            ReactDOM.render(
                <LightningCounterDisplay/>,
                document.querySelector("#container")
            )

////

kirupa · September 21, 2017, 9:07pm

Can you copy and paste the error from the console?

nbryson · September 22, 2017, 10:32pm

Here you go! Thx again!

Uncaught SyntaxError: embedded: Unexpected token (13:26)
  11 |                 }
  12 |  
> 13 |                 timerTick = () => {
     |                           ^
  14 |                     this.setState({
  15 |                         strikes: this.state.strikes + 100
  16 |                     });

kirupa · September 22, 2017, 10:34pm

I made a mistake when specifying the current syntax for timerTick. Try this instead:

timerTick() {
    this.setState({
        strikes: this.state.strikes + 100
    });
}

oalbacha · December 21, 2017, 1:57pm

Can’t seem to see the card for some reason. Can you help see if there is any error in my code or dependencies or whatever please:

<!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> More Components </title> 

        <script src = "https://unpkg.com/[email protected]/umd/react.development.js" > </script> 
        <script src = "https://unpkg.com/[email protected]/umd/react-dom.development.js" > </script> 
        <script src= "https://unpkg.com/[email protected]/babel.min.js" > </script>

        <style> 
            #container {
                padding: 50 px;
                background - color: #FFF;
            } 
        </style> 
    </head>

    <body >
        <div id = "container" >
        
        </div>
        
        <script type = "text/babel" >
            

            var Square = React.createClass({
              render: function() {
                return (
                  <div/>
                );
              }
            });


            var Label = React.createClass({
              render: function() {
                return (
                  <div/>
                );
              }
            });


            var Card = React.createClass({
              render: function() {
                var cardStyle = {
                  height: '200px',
                  width: '150px',
                  padding: 0,
                  backgroundColor: '#FFF',
                  WebkitFilter: 'drop-shadow(0px 0px 5px #666)',
                  filter: 'drop-shadow(0px 0px 5px #666)'
                };
                return (
                  <div style= {cardStyle}>

                  </div>
                );
              }
            });


            var destination = document.querySelector('#container');

            ReactDom.render(
                <div>
                  <Card/>
                </div>,
                destination
            );
        </script> 
    </body>
</html>

oalbacha · December 21, 2017, 5:40pm

My inspect console error is the following:

Uncaught TypeError: React.createClass is not a function

kirupa · December 26, 2017, 3:19am

You have to use the class syntax as opposed to React.createClass, starting with React 16. The code in the tutorial should work for you, for it is using the latest syntax! The video isn’t updated yet, but that is something I will try to re-record later this week

oalbacha · December 26, 2017, 3:28pm

Would you post a blog or notify us followers when you do update the videos please. Many thanks,

Jamadalama · December 10, 2019, 8:04pm

Good stuff man this book has been helpful and greatly appreciated.

kirupa · December 11, 2019, 1:43pm

Thanks! Glad you enjoyed it