creating a tabbar in reactjs using reusable button class where user can pass any html content using jsx.

full working example in below link:-

sample contain three type of component's
1. Button
2. Slider
3. TabBar

https://stackblitz.com/edit/react-qjonsv?file=Hello.js

tab bar class code:-

export class TabBar extends Component

{

constructor(props)

{

this.state = { content: undefined };

super(props);

this.tabDataDiv = React.createRef();

}

componentDidMount()

{

this.state = {

content: this.props.data[0].tabData

};

this.setState(this.state);

}

updateTabData(data)

{

this.state = {

content: data

};

this.setState(this.state);

}

getTabs()

{

let tabArray=[];

for(let key in this.props.data)

{

tabArray.push(<GTbutton color="pink" label={this.props.data[key].name}

buttonClick={

()=>

{

this.updateTabData( this.props.data[key].tabData);

}

} key={key}/>);

}

return tabArray;

}

getTotalTabs()

{

const tabHeader=

<div>

<div className="flex-container">

{this.getTabs()}

</div>

<div ref={ this.tabDataDiv }>

{this.state.content}

</div>

</div>

return tabHeader;

}

render()

{

return(

<div>

{this.getTotalTabs()}

</div>

);

}

}

//and below are reusable button code=====================================================

export class GTbutton extends Component

{

constructor(props)

{

super(props);

}

PointerDown()

{

if(this.props.buttonClick)

{

this.props.buttonClick();

}

}

render()

{

return(

<div >

<button className="button" onClick={this.click=()=>

{

this.PointerDown();

}} style={{background:this.props.color}}>{this.props.label}</button>

</div>

);

}

}