Vishnu Paspunoor Vishnu Paspunoor - 1 month ago 6
Javascript Question

Valid reactjs components not rendering when they are nested

I am getting this error while rendering a composition of components. I am unable to find where the error is. What am I doing wrong and how to read where the error exactly is by reading from console?

var Hamburger = React.createClass({
render: function(){
return(
<img id="hamburger" src="hamburger.png"/>
)
}
});

var Search = React.createClass({
render: function(){
return(
<div>
<input id ="search-input" type="text" placeholder = "Search your favorites"/>
<img id="search-img" src = "search.png"/>
</div>
)
}
});

var Cart = React.createClass({
render: function(){
return(
<img id ="cart" src = "cart.png"/>
)
}
});

var Header = React.createClass({
render: function(){
return(
<div id="header">
<Hamburger/>
<Search/>
<Cart/>
</div>
)
}
});

// Scroll bar for categories

var Tab = React.createClass({
render: function(){
return(
<p>{this.props.name}</p>
)
}
})

var tabNames = ["VEG PIZZA","NON-EG PIZZA","PIZZA MANIA","BURGER PIZZA","SIDES AND BEVERAGES"];
var ScrollBar = React.createClass({
render: function(){
var tabs = [];
for (var i = 0; i < tabNames.length; i++) {
tabs.push(
<Tab name = {tabNames[i]} key={i}/>
)
}
return(
<div id = "scrollbar">{tabs}</div>
)
}
});


var Quickadd = React.createClass({
render: function(){
return(
<input className = "action-btn" type="button" value="Quick Add"/>
)
}
});


var Item = React.createClass({
render: function(){
return(
<div className= "item-tab">
<img className="pizza-img" src={this.props.source}/>
<div className="item-title">{this.props.title}</div>
<div className="item-desc">{this.props.desc}</div>
<div className="item-price">{this.props.price}</div>
<div className="size-btns">
<input className="size-btn" type="button" value="Regular"/>
<input className="size-btn" type="button" value="Medium"/>
<input className="size-btn" type="button" value="Large"/>
</div>
<div className = "action-btns">
<input className = "action-btn" type="button" value="Quick Add"/>
<Quickadd/>
</div>
</div>
)
}
});


var Pizzas = [
{
title: "Pizza1",
description: "Lorem ipsum dolor sit amet, insolens expetenda euripidis sit ne, nec et option aperiri, id vel verear verterem imperdiet.",
price: "₹910",
image: "images/pizza.jpg"
},
{
title: "Pizza2",
description: "Lorem ipsum dolor sit amet, insolens expetenda euripidis sit ne, nec et option aperiri, id vel verear verterem imperdiet.",
price: "₹545",
image: "images/pizza.jpg"
},
{
title: "Pizza3",
description: "Lorem ipsum dolor sit amet, insolens expetenda euripidis sit ne, nec et option aperiri, id vel verear verterem imperdiet.",
price: "₹654",
image: "images/pizza.jpg"
},
{
title: "Pizza4",
description: "Lorem ipsum dolor sit amet, insolens expetenda euripidis sit ne, nec et option aperiri, id vel verear verterem imperdiet.",
price: "₹785",
image: "images/pizza.jpg"
},
{
title: "Pizza5",
description: "Lorem ipsum dolor sit amet, insolens expetenda euripidis sit ne, nec et option aperiri, id vel verear verterem imperdiet.",
price: "₹687",
image: "images/pizza.jpg"
}
];


var ItemContainer = React.createClass({
render: function(){
var items = [];
for (var i = 0; i < items.length; i++) {
items.push(<Item source={Pizzas[i].image} title={Pizzas[i].title} desc={Pizzas[i].description} price={Pizzas[i].price} key={i}/>)
}
return(
<div className="items">
{items}
</div>
)
}
});

var MainContent = React.createClass({
render: function(){
<div className="main-content">
<Header/>
<ScrollBar/>
<ItemContainer/>
</div>
}
});

ReactDOM.render(<MainContent/>,document.getElementById('workspace'));


I replaced MainContent with Header,ScrollBar and ItemContainer in ReactDOM.render and they are individually getting rendered. But MainContent is not rendering and this is the error:


Uncaught Invariant Violation: MainContent.render(): A valid React
element (or null) must be returned. You may have returned undefined,
an array or some other invalid object.


Please explain why its happening?

Answer

You're not returning from your MainContent render function, meaning your MainContent is returning undefined:

var MainContent = React.createClass({
    render: function(){
        return (
            <div className="main-content">
                <Header/>
                <ScrollBar/>
                <ItemContainer/>
            </div>
        )
    }
});
Comments