How to replace react component with another when event triggered in that component

Question

So, i (Total react beginner) have this React component.

import './cryptography.css';
import {useRef} from 'react';
import useInterval from 'react-useinterval';
import { useState } from 'react';

const DisplayTimer = () => {
    const [time, setTime] = useState(0);
    useInterval(() => {
        setTime(time + 1);
    }
        , 1000);

    const hours = Math.floor(time / 3600);
    const minutes = Math.floor((time % 3600) / 60);
    const seconds = time % 60;

    return (
        <div className="timer">
            <h3>Timer</h3>
            <p>{hours.toString().padStart(2, '0')}:{minutes.toString().padStart(2, '0')}:{seconds.toString().padStart(2, '0')}</p>
        </div>
    )
}

const CryptoOne = () => {
    const inputRef = useRef();

    function verifyAnswer() {
        if (inputRef.current.value === "c6e24b99a8054ab24dd0323530b80819") {
            alert("Correct!");
        }
        else {
            alert("Wrong!");
        }
    }

    return (
        <div className="crypto-one">
            <h3>Level One</h3>
            <p>Convert this plaintext into an MD5 hash - "RollingStonesGatherNoMoss"</p>

            <input ref={inputRef} type="text" id="one-answer" name="one-answer" />
            <button onClick={verifyAnswer}>Submit</button>
        </div>
    )
}

const CryptoTwo = () => {
    const inputRef = useRef();

    function verifyAnswer() {
        if (inputRef.current.value === "IaMaHackerManHaHa") {
            alert("Correct!");
        }
        else {
            alert("Wrong!");
        }
    }

    return (
        <div className="crypto-two">
            <h3>Level Two</h3>
            <p>Decode Caesar cipher into plaintext - "FxJxExzhboJxkExEx"</p>

            <input ref={inputRef} type="text" id="two-answer" name="two-answer" />
            <button onClick={verifyAnswer}>Submit</button>
        </div>
    )
}

const CryptoThree = () => {
    const inputRef = useRef();

    function verifyAnswer() {
        let input = inputRef.current.value;
        let answer =  "SHA256".toLowerCase();
        
        if (input === answer) {
            alert("Correct!, completed the exercise");   
        }
        else {
            alert("Wrong!");
        }
    }

    return (
        <div className="crypto-three">
            <h3>Level Three</h3>
            <p>Identify the type of the hash (Type only the hash type, with no spaces) - "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855"</p>

            <input ref={inputRef} type="text" id="three-answer" name="three-answer" />
            <button onClick={verifyAnswer}>Submit</button>
        </div>
    )
}

const Cryptography = () => {
    const [active, setActive] = useState("crypto-one");

    return (
        <div className="cryptography">
            <h1>Cryptography</h1>
            <DisplayTimer />
            <div className="crypto-container">
                <CryptoOne />
            </div>
        </div>
    )
}

export { Cryptography };

Here, i have this cryptography function that will display a question and if it is correct, that question will be replaced with another. I have 3 seperate functions CryptoOne, CryptoTwo and CryptoThree which will be displayed in function Cryptography. So that means if the answer for the question for CryptoOne is correct, then it will be replaced with CryptoTwo and so on. So my questions is HOW DO I DO IT?

Thanks in advance.

Answer 1

You can maintain a activeIndex state in Cryptography component. And have a changeSlide method which increments activeSlideIndex by 1 everytime the answer is correct. As shown below

const Cryptography = () => {
  const [active, setActive] = useState("crypto-one");
  const [activeIndex, setActiveIndex] = useState(1);

  const incrementIndex = () => {
    setActiveIndex(prevIndex => prevIndex + 1)
  }

  return (
    <div className="cryptography">
      <h1>Cryptography</h1>
      <DisplayTimer />
      <div className="crypto-container">
        {activeSlideIndex === 1 && <CryptoOne changeIndex={incrementIndex}  />}
        {activeSlideIndex === 2 && <CryptoTwo changeIndex={incrementIndex} />}
        {activeSlideIndex === 3 && <CryptoThree />}
      </div>
    </div>
  )
}

You can pass this changeSlide() method as a prop in every component. And call it whenever the answer is correct

const CryptoOne = ({changeIndex}) => {
  const inputRef = useRef();

  function verifyAnswer() {
    if (inputRef.current.value === "c6e24b99a8054ab24dd0323530b80819") {
      alert("Correct!");
      changeIndex()
    }
    else {
      alert("Wrong!");
    }
  }

  return (
    <div className="crypto-one">
      <h3>Level One</h3>
      <p>Convert this plaintext into an MD5 hash - "RollingStonesGatherNoMoss"</p>

      <input ref={inputRef} type="text" id="one-answer" name="one-answer" />
      <button onClick={verifyAnswer}>Submit</button>
    </div>
  )
}

const CryptoTwo = ({changeIndex}) => {
  const inputRef = useRef();

  function verifyAnswer() {
    if (inputRef.current.value === "IaMaHackerManHaHa") {
      alert("Correct!");
      changeIndex()
    }
    else {
      alert("Wrong!");
    }
  }

  return (
    <div className="crypto-two">
      <h3>Level Two</h3>
      <p>Decode Caesar cipher into plaintext - "FxJxExzhboJxkExEx"</p>

      <input ref={inputRef} type="text" id="two-answer" name="two-answer" />
      <button onClick={verifyAnswer}>Submit</button>
    </div>
  )
}

const CryptoThree = () => {
  const inputRef = useRef();

  function verifyAnswer() {
    let input = inputRef.current.value;
    let answer = "SHA256".toLowerCase();

    if (input === answer) {
      alert("Correct!, completed the exercise");
    }
    else {
      alert("Wrong!");
    }
  }

  return (
    <div className="crypto-three">
      <h3>Level Three</h3>
      <p>Identify the type of the hash (Type only the hash type, with no spaces) - "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855"</p>

      <input ref={inputRef} type="text" id="three-answer" name="three-answer" />
      <button onClick={verifyAnswer}>Submit</button>
    </div>
  )
}