Почему не работает условный рендеринг компонентов в React?

Question

[AutoGG]

Кто знает в чем может быть проблема? Решил отображать компоненты по клику кнопки, если нажали на кнопку, то выводится компонент GroupList, иначе остается SelectGroup.

В этом компоненте делаю проверку и принимаю значение для проверки. Вывожу GroupList, если true и SelectGroup, если false. Значение принимаются через пропсы.



Эта функция вызывается, когда прожимается кнопка и если ее прожали, то isSelect изменяется на true и должен выводиться компонент GroupList. Но когда нажимают на кнопку, то в консоли пишется текст, но компонент не выводится. ЗАРАНЕЕ СПАСИБО!!!!

Comments

[WbICHA]

Эммм... Тебя в хэндлере ничего не смущает?

[Kentavr16]

isSelect это стейт приложения или просто переменная?

[Kentavr16]

WbICHA, jsx затесался?

[AutoGG]

Kentavr16, isSelect это проп

[AutoGG]

WbICHA, нет

[AutoGG]

Kentavr16, всм затесался

[Kentavr16]

AutoGG, Для того чтобы реакт понял что что-то изменилось нужно изменить стейт приложения.Вот набросал очень простенький пример.Пропсы сами по себе вам не помогут. И обработчик также написан неверно.

[AutoGG]

Kentavr16, у меня все в разных файлах, этот пример работал бы для меня если бы я использовал все в одном файле

[Kentavr16]

AutoGG, тогда вам нужно передать в дочерний элемент функцию, которая изменяет состояние родительского стейта. Но принцип тот же. Переработал немного пример, посмотрите, теперь вы можете изменить стейт из вложенного компонента через пропсы. Особое внимание на то что куда передается)

[Kentavr16]

AutoGG, в одной статье встречал аналогию с бумерангом - ты "запускаешь" в дочерний компонент функцию, которая подобно бумерангу "вернется" с измененным значением. И не важно, в одном файле компоненты или в разных. Внимательно ознакомься с тем что такое jsx, и поймешь что от него нужно требовать.

[0xD34F]

3.8

Answer 1

[Константин Подыганов]

Функция компонент не возвращает

https://i.stack.imgur.com/F4wXq.png

function handleClick() {
  return <TimeTable />
}

Но я согласен, очень странный код. обработка нажатия смущает

Оставим TimeTable. Сделаем обработку в другом месте, допустим компонент

function App() {
  const [isSelect, setSelect] = useState(false)

  const handleClick = () => setSelect(prev => !prev)

  return <div>
<button onClick={handleClick}>Show</button>
<TimeTable isSelect={isSelect} /></div>
}

Comments

[AutoGG]

у меня много страничный сайт, и все что написано в app отображается на главной странице

[Дмитрий]

AutoGG, сделай
console.log( typeof handleClick, handleClick )

[AutoGG]

Этот способ работает на половину, у меня кнопки перебираются из axios запроса с помощью маппинга и если кинуть <TimeTable isSelect={isSelect} /> в фрагмент цикла, то меню со списком кнопок(групп) ломается. При нажатии на кнопку меня перекидывает к расписание этой группы, но список групп не исчезает, а становится поверх. Если закинуть тот фрагмент вне цикла, то список не ломается, но и кнопки не прокликиваются