ReactJS - Without changing URL switch between multiple components

Question

I have three components, we should have to switch between back and forth within those components. Eg: React-Stepzilla

Note : Need to work without wizard like npm modules

Answer 1

Just create a parent component with index as state:

const getCurrentComponent = (index) => {
  switch(index) {
    case 0:
      return <First />
    case 1:
      return <Second />
    default:
      return <SomethingElse />
  }
}

const Parent = () => {
  const [index, setIndex] = useState(0);
  return (
    <>
      {getCurrentComponent(index)}
      <button onClick={() => setIndex(prev => prev - 1)}>Prev</button>
      <button onClick={() => setIndex(prev => prev + 1)}>Next</button>
    </>
  );
}

Answer 2

You can simply make a parent container in which you can switch between various child component based on some condition. Created a sample code for reference. Hope this helps

Parent extends PureComponent{
     constructor(){
       this.state={
          index:0 //initial index
         }
      }
    const ChildComponents = [
         <ChildComponent1 />,<ChildComponent2 />]; //add components as per your need


    render{
       const {index} = this.state;
      return( {ChildComponents[index]})
    }