I have two components smallViewComponent.jsx and fullViewComponent.jsx. In smallViewComponent.jsx, there are 3 instances of <AbcComp>.

So, the requirement is how to get these <AbcComp> instance on button click loadInstance() and render the different instances of <AbcComp> in fullViewComponent.jsx.

smallViewComponent.jsx

import AbcComp from './..'

 this.state = {
   cmpInstance = ['component1','component2','component3'];
 }
  
    
    render (){
       return (
               <div>
                   this.state.cmpInstance.map((e, index) => 
                        return (
                              //'component1','component2','component3' instance of AbcComp 
                            <AbcComp key={e} btnProps={e}/>  
                                                             
                         )       
              </div>
       )
    }

AbcComp.jsx

render(){
       // based on btnProps some diffrent color is added here
      return (<div><Button className={this.props.btnProps}/></div>) 
 }

fullViewComponent.jsx

loadInstance =() => {
  let cmpInstance = ['component1','component2','component3'];
   return cmpInstance[(Math.random() * cmpInstance .length) | 0]
}

render (){ 
       <button onClick={(e) => this.loadInstance()}></button>
     // dynamically load 'component1','component2','component3' instance of AbcComp below.
        <AbcComp /> 
}