Почему мой обработчик событий React и функция состояния «работают» во всех аспектах, за исключением фактического условно ⇐ Javascript

[Anonymous]

Я развиваюсь в React впервые, и мне нужно иметь кнопку в моей навигационной панели, которая переключает видимость моего раздела фильтров. Я использовал на кнопке прослушивателя Onclick и установил его, чтобы переключить ложное состояние по умолчанию и отображать фильтры только в том случае, когда состояние верно, и все, что работает при тестировании, за исключением того, что в моем приложении ничего не показано визуально визуально. Пожалуйста, помогите, что я пробовал, не работаю, и я все из идей.import './App.scss'
import { useState, useEffect } from 'react';
import Navigation from '../src/components/Navigation/Navigation.jsx'
import ParentContainer from '../src/components/ParentContainer/ParentContainer.jsx'
import Footer from '../src/components/Footer/Footer.jsx'
import PhotoList from '../src/components/PhotoList/PhotoList'
import Filters from './components/Filters/Filters.jsx';
import Mission from '../src/components/Mission/Mission.jsx'

export default function App() {
const [filterToggle, setFilterToggle] = useState(false);
useEffect(() => {
console.log('filterToggle updated:', filterToggle);
}, [filterToggle]);

return (





{/* */}
{filterToggle && }
{/* {filterToggle ? : null} */}



)
};
< /code>
navigation.jsx
import './Navigation.scss';
import Button from '../Button/Button';

export default function Navigation({ filterToggle, setFilterToggle}) {
const filtersClicked= (event) => {
event.preventDefault();
setFilterToggle(!filterToggle);
console.log("app recognizes event", filterToggle);
};
return (



Snaps




)
};
< /code>
button.jsx
import './Button.scss';
import filterIcon from '../../assets/images/Filter.svg';

export default function Button({handleClick, isSelected}) {
return (

Filters




)
};
< /code>
Фильтры (для ссылки) прокомментировали любую другую функциональность < /p>
import './Filters.scss';
import FiltersList from '../FiltersList/FiltersList.jsx'

export default function Filters() {
console.log('Filters component rendered');
return (


Filters


{/* setFilterCards={setFilterCards}
filterCards={filterCards} /> */}

)
};
// {setFilterCards, filterCards}
< /code>
Это не проблема с CSS (скрытыми или переполненными проблемами), тем более что я пытаюсь скрыть фильтр на уровне компонентов, а не на уровне класса CSS. Я также пытался использовать тройной, чтобы показать/скрыть компонент фильтров, и это тоже не работает. Мне нужен мой компонент фильтров, чтобы рендеринг на клике (правда), и не рендеринг на флазе, это не сработает, и я понятия не имею, с чего начать.


Подробнее здесь: https://stackoverflow.com/questions/794 ... ects-excep