In a [previous article](http://www.kirupa.comcomponents.htm), 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](http://www.kirupa.com/react/creating_complex_components.htm)
---
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(
```
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 (
);
}
});
ReactDOM.render(
,
document.querySelector("#container")
);
```
Why the Div matter if I do not reference the Square class at all?
Regards,
N.
---
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.
🙂
---
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.’
---
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!
```auto
var Square = React.createClass({
render: function(){
var = squareStyle = {
heght: 150,
backgroundColor: this.props.color
}
};
return(
);
}
});
var Label = React.createClass({
render: function() {
var labelStyle = {
fontFamily: "sans-serif",
fontWeight: "bold",
padding: 13,
margin: 0
return(
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 (
I made a mistake when specifying the current syntax for `timerTick`. Try this instead:
```
timerTick() {
this.setState({
strikes: this.state.strikes + 100
});
}
```
---