Need to slice cards after page rendering react class component - reactjs

Question

I have a page where i need to show 9 cards initially and on click of show more i need to show more cards until API call has data. I used slice method and I am able to achieve same thing but because of slice SEO performance is impacted, these divs r not crawled by google, so now the problem is I need to render all div cards intially on the page and need to show only 9 by some other method. I have no clue how to achieve this. Can anyone please help me with this using class component in react.
import React from 'react';
import WebinarList from './WebinarList';
import Webinars from './Webinars';
export default class WebinarData extends React.Component{
constructor(...props) {
super(...props);
this.state = {
isVisible: 9,
setFlag: true,
totalValue:0
};
this.showmoreWebinar = this.showmoreWebinar.bind(this);
this.mathCal = this.mathCal.bind(this);
}
componentWillReceiveProps(nextProps) {
const webinarList = this.props.webinarListInfo ?
this.props.webinarListInfo: null;
const total = webinarList? webinarList.length : 0;
if(this.state.isVisible >= total){
this.setState((old)=>{
return {
isVisible: 9,
}
})
}
}
showmoreWebinar(offset, total){
this.setState((old)=>{
return {
isVisible: old.isVisible + offset,
}
})
}
mathCal(n){
if(n > 0)
return Math.ceil(n/3.0) * 3;
else if( n < 0)
return Math.floor(n/3.0) * 3;
else
return 3;
}
render(){
// console.log("in web");
// console.log(this.props.webinarListInfo);
const webinarList = this.props.webinarListInfo ?
this.props.webinarListInfo: null;
const webinarBanner = this.props.webinarBanner &&
this.props.webinarBanner.webinarLandingItems ?
this.props.webinarBanner.webinarLandingItems[0]: null;
let offset = webinarBanner && webinarBanner.PageSize?
webinarBanner.PageSize : 9;
offset= this.mathCal(offset);
const showMore = webinarBanner && webinarBanner.LoadMoreButtonText?
webinarBanner.LoadMoreButtonText: "Show more" ;
const list = webinarList ? webinarList.map((item, index) => (
<Webinars info={item} index={index} labelInfo=
{this.props.webinarList}/>
)
) : null;
const total = webinarList? webinarList.length : 0;
return(
<div>
<div className="webinarData">
<WebinarList labelInfo={this.props.webinarList} totalList=
{webinarList}/>
{list}
</div>
<div className="l-show-more-btn">
{webinarBanner ? (<button className="c-button showmore-webinar
is-desktop is-medium is-upper-case"
style={{ display: this.state.isVisible >= total ?
'none' : 'block' }}
onClick={() => this.showmoreWebinar(offset, total)} >
{showMore}
</button>) : null}
</div>
{total <= 0 ? (<div className=""><p style={{textAlign:'center'}}>
{this.props.webinarList && this.props.webinarList.ResultNotFound?
this.props.webinarList.ResultNotFound: null}</p></div>):null}
</div>
);
}
}
Now i need to remove this slice method so everything is displayed on page load then need to slice it(basically show and hide kind of thing in UI).Following is the structure how it should look like in UI: