React Tabs content - reactjs

Question

I was playing around with React for the first time and trying to figure out how to make tabs. I found an outline of the code that looks simple and clean enough (do correct me if I'm wrong though, please), but I don't know how to show the content of the tabs outside of the 'constructor'. As I want the tab content to be more than just a couple of words, and the current code seems constricting.
This is the part that I'm talking about:
constructor(props) {
super(props);
this.state = {
activeTabIndex: 0,
initialData: [
{
label: 'Tab 1',
content: 'Content 1',
},
{
label: 'Tab 2',
content: 'Content 2',
},
{
label: 'Tab 3',
content: 'Content 3',
},
],
};
this.handleTabClick = this.handleTabClick.bind(this);
}
How do I pull the content outside of this, if I have too much content to be put inside that? Here is the entire code outline: link. Any suggestions/links are welcome.
And I apologize if I'm explaining this wrong, I'm still trying to figure stuff out. Thanks!

Answer 1

Just create a Component you want to render in Tab Content and assign it to content.
import React, { Component } from "react";
import Tabs from "./Tabs";
import Content from "./Content";
export default class TabView extends Component {
constructor(props) {
super(props);
this.state = {
activeTabIndex: 0,
initialData: [
{
label: "Tab 1",
content: <TabContent />
},
{
label: "Tab 2",
content: "Content 2"
},
{
label: "Tab 3",
content: "Content 3"
}
]
};
this.handleTabClick = this.handleTabClick.bind(this);
}
handleTabClick(index) {
this.setState({
activeTabIndex: index
});
}
render() {
const { initialData, activeTabIndex } = this.state;
const activeItem = this.state.initialData[activeTabIndex];
return (
<div>
<Tabs
handleTabClick={this.handleTabClick}
data={this.state.initialData}
activeTabIndex={activeTabIndex}
/>
<Content content={activeItem.content} />
</div>
);
}
}
const TabContent = () => (
<div>
<p>I am here</p>
</div>
);