creating a dynamic tabbar in reactjs

working link
https://stackblitz.com/edit/react-scyhqh

import React, { Component } from 'react';

import { render } from 'react-dom';

import Hello from './Hello';

import './style.css';

function TabButton(props)

{

return <button className="button" onClick={()=>{

if(props.onClick!=null)

{

props.onClick({label:props.label});

}

}}>{props.label}</button>

}

class App extends Component {

constructor() {

super();

this.currentPage=0;

this.totalPage=4;

this.buttonData=[

{label:"manish1"},

{label:"sachin2"},

{label:"deepak3"},

{label:"sanjay4"},

{label:"manish21"},

{label:"sachin22"},

{label:"deepak23"},

{label:"sanjay24"},

{label:"manish31"},

{label:"sachin32"},

{label:"deepak33"},

{label:"sanjay34"},

{label:"manish41"},

{label:"sachin42"},

{label:"deepak43"},

{label:"sanjay44"},

];

this.state = {

name: "",

buttonData:this.getFrom(this.currentPage,this.totalPage)

};

}

componentWillMount()

{

this.setState({name:this.buttonData[0].label});

}

getFrom(from,to)

{

var arr=[];

for(var i=from;i<to;i++)

{

arr.push(this.buttonData[i]);

}

return arr;

}

onTabButtonPressed(data)

{

this.setState({name:data.label});

}

nextAction()

{

if(this.totalPage==this.buttonData.length)

{

this.totalPage=this.buttonData.length;

return;

}

this.currentPage+=4;

this.totalPage+=4;

this.setState({buttonData:this.getFrom(this.currentPage,this.totalPage)});

}

preAction()

{

if(this.totalPage==4)

{

this.totalPage=4;

return;

}

this.currentPage-=4;

this.totalPage-=4;

this.setState({buttonData:this.getFrom(this.currentPage,this.totalPage)});

}

render() {

return (

<div>

<TabButton label="back" onClick={(data)=>{

this.preAction();

}}></TabButton>

{

this.state.buttonData.map((value,index)=>{

return <TabButton label={value.label} key={index}onClick={(data)=>{

this.onTabButtonPressed(data);

}}></TabButton>

})

}

<TabButton label="next" onClick={(data)=>{

this.nextAction();

}}></TabButton>

<div className="card">

<div className="container">

<h4><b>{this.state.name}</b></h4>

<p>Architect & Engineer</p>

</div>

</div>

</div>

);

}

}

render(<App />, document.getElementById('root'));