Как скрыть и показать компоненты с помощью useState или условного рендеринга в React?

Один из простых способов — сохранить логическое значение в состоянии (например, isVisible = true) либо в useState, либо в mobx и т. д. Затем в компоненте реакции вы можете использовать двойной амперсанд, как показано ниже:

{isVisible && <MyComponent/>}

Это будет отображаться только в том случае, если isVisible = true

const [currentComponent, setCurrentComponent] = useState(1);

const handleClick = () =>{
    switch(currentComponent){
        case 1:
            setCurrentComponent(2)
        case 2:
            setCurrentComponent(3)
        case 3:
            setCurrentComponent(4)
        case 4:
            setCurrentComponent(1)

    }
}


<button onClick = {()=> handleClick()}>Click me!</button>


{currentComponent == 1 && <Comp1/>};
{currentComponent == 2 && <Comp2/>};
{currentComponent == 3 && <Comp3/>};
{currentComponent == 4 && <Comp4/>};

На вашем месте я бы все упростил. Во-первых, я бы извлек array из компонента, так как вы не хотите, чтобы он повторно отображался каждый раз при повторном отображении компонента. Затем я бы изменил ваше состояние и оставил только состояние items, которое будет содержать array элементы. Я бы также расширил элементы array, добавив флаг isVisible. Затем я бы удалил ваш useEffect и улучшил handleClick, поскольку вы хотите, чтобы это вызывалось только при нажатии кнопки. В функции handleClick я бы создал новый набор элементов, сопоставив ваш items и изменив «не нажатые» элементы isVisible на false. Таким образом, вы знаете, какие предметы нужно спрятать. Наконец, я бы визуализировал компоненты на основе атрибута isVisible. Таким образом, если isVisible истинно, элемент будет отображаться с hidden, установленным на false, и наоборот.

Таким образом, код становится намного проще, производительнее и понятнее. Кроме того, он делает то, что вы просили.

Вот ссылка на пример рабочего кода: codeandbox

import React, { useState } from "react";

const Comp1 = () => <div>hi</div>;
const Comp2 = () => <div>hi2</div>;
const Comp3 = () => <div>hi3</div>;

const array = [
  { id: 1, component: <Comp1 />, isVisible: true },
  { id: 2, component: <Comp2 />, isVisible: true },
  { id: 3, component: <Comp3 />, isVisible: true }
];

export const Test = () => {
  const [items, setItems] = useState(array);

  const handleClick = (number) => {
    const triggeredItems = items.map((item) => {
      if (item.id !== number) {
        item.isVisible = !item.isVisible;
      }

      return item;
    });

    setItems(triggeredItems);
  };

  return (
    <div className = "flex">
      {items.map(({ id, component, isVisible }) => (
        <div
          key = {id}
          className = "h-12 w-12 bg-gray-400 m-1 flex items-center justify-center"
          onClick = {() => handleClick(id)}
          hidden = {!isVisible}
        >
          {component}
        </div>
      ))}
    </div>
  );
};

export default Test;