Не работает условный рендериг компонентов | React js

Question

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>
 <React.Fragment>
import GroupList from "./GroupList";
import SelectGroup from "./SelectGroup";

function Timetable(props: {isSelect: boolean}) {
    const isSelect = props.isSelect

    return isSelect ? <GroupList /> : <SelectGroup />
}
</React.Fragment>

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>
 <React.Fragment>
function handleClick (e:any) {
    <Timetable isSelect={true} />
    console.log(e.currentTarget.textContent)
}
</React.Fragment>

Answer 1

Как иллюстрация твоей идеи...

const App = _ => {
    const [slct, setSlct] = React.useState(true);

    return (
        <div>
            <button onClick={_ =>setSlct(!slct)}>Переключить</button>
            {slct ? <GroupList /> : <SelectGroup />}
        </div>
    )
};

//
function GroupList() {
    return <p>GroupList</p>
}

//
function SelectGroup() {
    return <p>SelectGroup</p>
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>

<div id='root'></div>

БЛОГ НА HUSL

Не работает условный рендериг компонентов | React js

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