Reactjs Components - Button/rendering problem

Question

I have a Componente Button and the same is found within another componente Main. My purpose was that by clicking on this componente Button, it was alternating between other visual components inside the Main.

The Button is like a kind of Component Controller and I would like every click to show a rendered behavior on the different screen, but I’m not able to do it the way I want.

Component Main:

import React, { Component } from 'react';
import './style.css';
import Handlerbutton from './HandlerButton';

class Main extends Component{
  render(){
    return(
     <div className="main" id="main">
      <div className="start">
       <Handlerbutton />
      </div>
    </div>
   );
  }
}
export default Main;

Component Button:

import React, { Component } from 'react';
import './style.css';
import StartAnimatedText from './../StartAnimation';
import Photos from './../../Photos';

class Handlerbutton extends Component {
  constructor(props){
    super(props);
    this.state = {
      nextpage: true,
      page:0,
      component:<StartAnimatedText />,
    }
  }
  handleClick = () => {
    const pageNumber = this.state.page;
    this.setState({ 
      page: this.state.page += 1,
      component: ''
    })
    //console.log(pageNumber);
    if(pageNumber === 0){
      this.setState({
        component: <Photos />
      })
    }
    else if(pageNumber === 1){
      this.setState({
        component: 'Outro componente aqui...'
      })
    }
   }
 render(){
   return (
    <div>
      {this.state.nextpage && this.state.component}
      <button id="btn-start" onClick={this.handleClick}><span>Continuar</span></button>
    </div>
   );
 }
}
export default Handlerbutton;

Rendered component:

Answer 1

A minimal example of how to change the component under some established condition, this may give a north how to do this and now it is with you put your own idea.

class Home extends React.Component {
  render() {
   return <div>Home</div>
  }
}
class Source extends React.Component {
  render() {
   return <div>Source</div>
  }
}
class End extends React.Component {
  render() {
   return <div>End</div>
  }
}
class App extends React.Component{  
  constructor(props){
    super(props);
    this.state = {
      component: 'Home'
    }
    this.handleChangeComponent = 
      this.handleChangeComponent.bind(this)
  }
  handleChangeComponent() {  
    let { component } = this.state;    
    if (component === 'Home') {
      component = 'Source';
    } 
    else if (component === 'Source') {
      component = 'End';
    }
    this.setState({component});
  }
  render() {  
    const { component } = this.state;    
    switch (component) {
      case 'Home': {
        return (
          <div>
            <Home/> 
            <button onClick={this.handleChangeComponent}>Next</button>
           </div>
        );
      }
      case 'Source': {
        return (
          <div>
            <Source/> 
            <button onClick={this.handleChangeComponent}>Next</button>
           </div>
        );
      }
      case 'End': {
        return (
          <div>
            <End/> 
           </div>
        );
      }
    }
  }
}
ReactDOM.render( <App/> , document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

This example became very simple for understanding, but, another example:

class Home extends React.Component {
  render() {
   return <div>Home</div>
  }
}
class Source extends React.Component {
  render() {
   return <div>Source</div>
  }
}
class End extends React.Component {
  render() {
   return <div>End</div>
  }
}
class App extends React.Component{  
  constructor(props){
    super(props);
    this.state = {
      index: 0,
      component: <Home />
    }
    this.handleChangeComponent = 
      this.handleChangeComponent.bind(this)
  }
  handleChangeComponent() {  
    let {index, component} =
      this.state;
    if (index === 0) {
      index = 1;
      component = <Source />      
    } 
    else if (index === 1)
    {
      index = 2;
      component = <End />
    }
    this.setState({
        index, component
    });
  }
  render() {  
    const { index, component } = this.state;    
    return (
      <React.Fragment>
        {component}
        {index !== 2 && (
          <button onClick={this.handleChangeComponent}>
            Next
          </button>
        )}
      </React.Fragment>
    )
  }
}
ReactDOM.render( <App/> , document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

then there are several ways to solve the problem.