React referencing const outside of class - reactjs

Question

I'm very new to React, so this might be a stupid question. But I'm making tabs. And I decided to split the content of the tabs into separate const. The issue is that now I can no longer reference anything in tabs content that I declared in the class section. I'm obviously doing something wrong. Can someone please take a look and let me know what I need to fix here?
Here's the basic outline of my code. How do I reference company inside the GeneralContent const? Do I need to declare it elsewhere? When I reference it inside my class, it works.
class Tabs extends React.Component {
constructor(props) {
super(props);
this.state = {
activeLocation: 0,
activeTabIndex: 0,
initialData: [
{
label: "General",
content: <GeneralContent />
}
]
};
this.handleTabClick = this.handleTabClick.bind(this);
}
handleTabClick(index) {
this.setState({
activeTabIndex: index
});
}
render() {
const { initialData, activeTabIndex } = this.state;
const activeItem = this.state.initialData[activeTabIndex];
const { company } = this.props;
return (
<div>
<article>
<div>
<NavBar />
<div className="container">
<Tabs
handleTabClick={this.handleTabClick}
data={this.state.initialData}
activeTabIndex={activeTabIndex}
/>
<Content content={activeItem.content} />
</div>
</div>
</article>
</div>
);
}
}
const GeneralContent = () => (
<div>
<h1>{company.name}</h1>
</div>
);
Thank you!

Answer 1

In the constructor, you could add the company as prop to GeneralContent
initialData: [
{
label: "General",
content: <GeneralContent company={props.company}/>
}
]
This is not a good practice due to your GeneralContent will not be aware of if the company changes. You can address this by using componentDidUpdate
componentDidUpdate(prevProps, prevState) {
if(prevProps.company.name !== this.props.company.name) {
const tabData = [...this.state.initialData];
tabData.find((tab) => tab.label === 'General');
tabData.content = <GeneralContent company={this.props.company} />;
this.setState({initialData: tabData});
}
}
This updates youGeneral tab with the new company. As you see it is a little "complicated" to maintain.
I would refactor the code to avoid doing that, something like this:
class Tabs extends React.Component {
constructor(props) {
super(props);
this.state = {
activeTabIndex: 0,
};
this.handleTabClick = this.handleTabClick.bind(this);
}
handleTabClick(index) {
this.setState({
activeTabIndex: index
});
}
render() {
const { activeTabIndex } = this.state;
const tabData = [
{
label: "General",
content: <GeneralContent company={this.props.company}/>
}
];
const tabContent = tabData[activeTabIndex];
return (
<div>
<article>
<div>
<NavBar />
<div className="container">
<Tabs
handleTabClick={this.handleTabClick}
data={tabData}
activeTabIndex={activeTabIndex}
/>
<Content content={tabContent} />
</div>
</div>
</article>
</div>
);
}
}
const GeneralContent = () => (
<div>
<h1>{company.name}</h1>
</div>
);
Basically, the tabs generation has been moved to your render method.