Блог

У меня есть следующий код:

     function SolutionsSection({solutions}) {
      const mainSolutions = solutions.slice(0, 4);
      const restSolutions = solutions.slice(4);
      const [isShown, setShow] = useState(false);
       return (
        <div>
          <SolutionSectionBox
            isShown={isShown}
            mainSolutions={mainSolutions}
            restSolutions={restSolutions}
          />
           {/*below is my button component*/}
          <SolutionsSectionAllServices
            setShow={setShow}
            isShown={isShown}
          />
      </div>
     );
    }

  

У меня есть информация о 4 «решениях» в серверной части (в будущем будет информация о 9 решениях). Я могу успешно извлечь эту информацию и передать в мой компонент «SolutionsSection», как вы видите.

Я разделил информацию на две части. Сначала «Основные решения», которые покажут первые 4 решения. Второй — это мои «restSolutions», который загрузит rest решения, нажав на «SolutionsSectionAllServices». с помощью useState я решаю показывать или скрывать свои остальные решения

Теперь мой вопрос в том, как я могу скрыть свою кнопку, когда у меня есть только 4 решения, мне не нужна моя кнопка, потому что больше нечего показывать, поскольку все решения были отображены.

Вы можете сделать что-то вроде этого:

 {restSolutions > 0 ? <YourButtonComponent> : null}