Как переключаться между компонентами?

Question

[Даниил Секретов]

У меня есть код на React, который сначала отображает AppRu, потом после нажатия на кнопку AppEng, далее при нажатие снова AppRu, как сделать, чтобы при нажатии отображался еще один элемент AppEfret, а уже потом AppRu , и так заново?

import AppRu from './App-ru'
import AppEng from './App-eng'
import AppEfret from './App-efret'

import React, {useState} from 'react';
import stylesHeader from './components-ru/headers/Header.module.css'
function App() {
  const [language, setLanguage] = useState(0);

  const buttonTexts = ['Ru', 'Eng','Efrit'];

  const handleClickLanguageEng = () => {
    if (language === buttonTexts.length - 1) {
      setLanguage(0);
    } else {
      setLanguage(language + 1);
      
    }
    }


  return (
    <div>
          <div className ={stylesHeader.languageSettingsButton} onClick={() => { handleClickLanguageEng();}}>
            <h1 className={stylesHeader.languageSettingsText} onClick={() => {handleClickLanguageEng();}}>{buttonTexts[language]}</h1>
        </div>
        {language ? <AppEng /> : <AppRu />} 


    </div>
  );
}

export default App;

Answer 1

[0xD34F]

const languages = [
  { name:  'Ru', Component: AppRu  },
  { name: 'Eng', Component: AppEng },
  ...
];

const [ language, setLanguage ] = useState(0);
const { name, Component } = languages[language];
const onClick = () => setLanguage((language + 1) % languages.length);

<button onClick={onClick}>{name}</button>
<Component />

Answer 2

[Даниил Секретов]

import React, { useState } from 'react';
import AppRu from './App-ru';
import AppEng from './App-eng';
import AppHebrew from './App-hebrew';
import stylesHeader from './components-ru/headers/Header.module.css';

function App() {
  const [language, setLanguage] = useState(0);
  const [carouselIndex, setCarouselIndex] = useState(0);

  const languages = [AppRu, AppEng, AppHebrew];

  const buttonTexts = ['Ru', 'Eng', 'Heb'];

  const handleClickLanguage = () => {
    if (language === buttonTexts.length - 1) {
      setLanguage(0);
    } else {
      setLanguage(language + 1);
    }
    setCarouselIndex(0);
  };

  const handleClickCarousel = () => {
    if (carouselIndex === languages.length - 1) {
      setCarouselIndex(0);
    } else {
      setCarouselIndex(carouselIndex + 1);
    }
  };

  const CurrentLanguage = languages[language];

  return (
    <div>
      <div className={stylesHeader.languageSettingsButton} onClick={handleClickLanguage}>
        <h1 className={stylesHeader.languageSettingsText}>{buttonTexts[language]}</h1>
      </div>
      <div onClick={handleClickCarousel}>
        <CurrentLanguage />
        <languages[carouselIndex] />
      </div>
    </div>
  );
}

export default App;