Почему компонент не перерисовывается?

Question

[NameUser]

По нажатию на кнопку необходимо подгружать соответствующие компоненты, для решения поставленной задачи использовал условный рендеринг. Почему-то компонент не перерисовывается, в чем может быть проблема?
Ниже привел используемую функцию с условным рендерингом:

const switchPatternTable = (text) => {
        switch (text) {
            case "1":
                return <A/>
            case "2":
                return <B/>
            case "3":
                return <C/>
            default:
                return <A/>
        }
    }

В функцию switchPatternTable передаю value кнопки:

const changePatternHandler = (e) => {
        let text= e.target.value;
        switchPatternTable(text);
}
 <button
        onClick={changeTypePatternTableHandler}
        className={style.btnFilter} 
        type="button"value="1">
        lorem 
</button>

Функцию switchPatternTable вызываю в нужном участке страницы:

switchPatternTable();

Comments

[YavaDev]

Используйте state

Answer 1

[0xD34F]

Вызов switchPatternTable внутри обработчика клика - зачем он там? Да ещё и результат улетает в никуда.

Вызов switchPatternTable в "нужном участке страницы" - во-первых, параметр не передаётся, т.е., результат всегда будет один и тот же; во-вторых, из показанного огрызка неясно, что с этим результатом происходит дальше.

Как бы мог выглядеть рабочий код (вам на подумать - как добавить сюда дефолтный вариант).