App.js

import AccordionBody from './AccordionBody';
import './styles.css';

function App() {
  const [showBody, setShowBody] = React.useState(false);

  useEffect(
    ()=> { 
    if (showBody) {   
      console.log('AccordionBody is shown')
    } else{
      console.log('AccordionBody is hidden')}
    },[showBody]
  )

  return (
    <div className="accordion">
      <div className="accordion-header" onClick={() => setShowBody(!showBody)}>
        testing-library
        <div className="open-close">{showBody ? 'close' : 'open'}</div>
      </div>
      { showBody &&  <AccordionBody />}
    </div>
  );
}

export default App;

AccordionBody.js


export default function AccordionBody() {

  return ( 
    < div className="accordion-body">
      The @testing-library family of packages helps you test UI components in a user-centric way.
    </div>
  );
}

При таком варианте отрабатывает правильно ответ.

Если все делать в AccordionBody.js и ничего не менять в App, тогда не понятно:

  1. как взять оттуда useState
  2. И обращение к AccordionBody.js происходит только в момент открытия, в момент закрытия нет обращения в данной функции.

Прошу пояснить.

Если решения еще нет - давай разбираться. Пятый пункт пока пропустим...
Начнем с шестого. useEffect должен быть вызван внутри компонента AccordionBody. Откройте компонент AccordionBody и посмотрите еще раз - у вас там есть вызов useEffect ??

App.js

import AccordionBody from './AccordionBody';
import './styles.css';

function App() {
  const [showBody, setShowBody] = React.useState(false);



  return (
    <div className="accordion">
      <div className="accordion-header" onClick={() => setShowBody(!showBody)}>
        testing-library
        <div className="open-close">{showBody ? 'close' : 'open'}</div>
      </div>
      { showBody &&  <AccordionBody showBody={showBody} />}
    </div>
  );
}

export default App;

AccordionBody


export default function AccordionBody(props) {
  const {showBody}= props
  useEffect(
    ()=> { 
    if (showBody) {   
      console.log('AccordionBody is shown')
    } else{
      console.log('AccordionBody is hidden')}
    },[showBody]
  )

  return ( 
    < div className="accordion-body">
      The @testing-library family of packages helps you test UI components in a user-centric way.
    </div>
  );
}

Ошибки теже, но самое главное:

  1. я не могу не изменяя App передать showBody
    2.отрабатывает только при открытии, потому что условие - { showBody && <AccordionBody />}

ок. давайте еще раз пропустим пока 5-ый пункт и начнем с шестого. от вас требуется вызвать useEffect единожды. Не зависимо от того, что будет происходить с компонентой. Как это сделать?

подсказка - у вас useEffect привязан к изменению одной переменной

5 месяцев спустя

Нужно вернуться к условию и внимательно прочитать условие при котором нам нужно выводить сообщения
ниже пример того как мы Монтируем/Размонтируем компонент

useEffect(() => {
Монтируем компонент
return () => Размонтируем;
}, []);

Написать ответ...