Rendering specific component using switch case --- React - reactjs

Question

My requirement is to render components based on user selection.
I have a left nav on click of which I am trying to render the component associated with it but I am getting error:
Error:
Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.
My code goes as under:
------ManageData.js-------
import React, {
Component
} from 'react';
import NestedList from '../Left-nav/leftnav';
import '../Left-nav/leftnav.css';
import AddCarousel from '../addCarousel/addCarousel';
import AddClass from '../addClass/addClass';
import './manageData.css';
class ManageData extends Component {
loadComponent = null;
constructor(props) {
super(props);
this.state = {
showChild: 1
};
//this.generateComponent = this.generateComponent.bind(this);
}
loadComponents = (data) => {
console.log(data, this.state);
if (data == 'AddClass') {
this.setState({
showChild: 2
}, () => {
console.log('state changed-----', this.state)
//this.generateComponent(data, this.state);
})
}
}
render() {
const showItem = this.state.showChild;
return (
<section className = "Admin-add-video">
<div className="row">
<div className = "col-3 set-padding" > < NestedList loadComponents = {this.loadComponents}/>
</div >
<div className = "col-9 set-ht" >
{ this.state.showChild == 1 && <AddCarousel/> }
{this.state.showChild == 2 && <AddClass/>}
</div>
</div>
</section>
);
}
}
export default ManageData;
Nested List is the separate component on click of its item I am getting the value and trying to setState().
I have tried everything from this url : using switch statement for react rendering
But for all the cases I am getting same error.
May be I am missing anything. Any help will be highly appreciated.

Answer 1

It looks like the problem is with AddClass component. Pl double check if it is exported correctly.
Note: Posting this answer from my comment on the question as it fixed OP's error.

Answer 2

Try this in the render method:
render() {
const { showChild } = this.state;
const renderChilds = () => {
switch(showChild) {
case 1:
return <AddCarousel />;
case 2:
return <AddClass />;
default:
return <div />;
}
};
return (
<section className="Admin-add-video">
<div className="row">
<div className = "col-3 set-padding">
< NestedList loadComponents={this.loadComponents} />
</div >
<div className = "col-9 set-ht" >
{renderChilds()}
</div>
</div>
</section>
);
}