Как скрыть только 1 компонент на странице, а не всю страницу React

Question

Скажите, пожалуйста, как исправить код, чтобы при нажатии на кнопку не скрывалась вся страница, на которой находится эта функция?

мне нужно при нажатии на кнопку скрыть ТОЛЬКО компонент <Notification /> а component1 и component2 остаются, как и страница, на котрой они находятся

// функции
     
     
 const [hidden, setHidden] = useState(false);
 if (hidden) return null;
     
     <Component1 />
     
     <Notification title="заголовок">
        <Text weight="400" className={styles.text}>
      Текст
        </Text>
        <div className={styles.buttonContainer} >
        <Button className={styles.notificationButton} onClick={() => setHidden(true)}>
          OK!
        </Button>
        </div>
      </Notification>
      
  <Component2 />

Answer 1

Добавьте условие по выводу компонента

{variable && <Component />}

Если variable будет true, то Component будет отрисован

const [hidden, setHidden] = useState(false);

return (
  <Component1 />

{!hidden && <Notification title="заголовок">
  <Text weight="400" className={styles.text}>
    Текст
  </Text>
  <div className={styles.buttonContainer} >
    <Button className={styles.notificationButton} onClick={() => setHidden(true)}>
      OK!
    </Button>
  </div>
</Notification>}

<Component2 />
)

Второй вариант, можно по условию показывать тот или иной компонент, с помощью тернарного оператора

{variable ? (<Component1>) : (<Component2>)}

В вашем коде это будет выглядеть так

return (
  <Component1 />

{!hidden ? (<Notification title="заголовок">
  <Text weight="400" className={styles.text}>
    Текст
  </Text>
  <div className={styles.buttonContainer} >
    <Button className={styles.notificationButton} onClick={() => setHidden(true)}>
      OK!
    </Button>
  </div>
</Notification>) 
: (<div>Нет уведомлений</div>)}

<Component2 />
)

БЛОГ НА HUSL

Как скрыть только 1 компонент на странице, а не всю страницу React

Ответы (1 шт):