Как реализовать отображение компонентов из массива?

Question

[Gevadan]

Имеется массив из трёх компонентов, выводимых на экран. Я сделал две функции, которые поочерёдно возвращают компонент согласно индексу, и навесил их на кнопки - Вперёд/назад. Однако желаемого эффекта не получил. Меж тем, в консоль выводиться вот это - $$typeof: Symbol(react.element).
Подскажите пожалуйста, в чём я ошибся?

const pages = [<Comp/>, <Comp2 />, <Comp3 />];

  let index = 0;

  const [page, setPage] = useState(pages[0]);

const rightHandler = () => {
    if (index >= pages.length - 1) return;
    index++;
    showPosition();
  };

  const leftHandler = () => {
    if (index <= 0) return;
    index--;
    showPosition();
  };

  function showPosition() {
    return pages[index];
  }

Answer 1

[0xD34F]

сделал две функции, которые поочерёдно возвращают компонент согласно индексу

Возвращают куда? Что с возвращённым происходит? Да ничего.

желаемого эффекта не получил

А как родительский компонент узнает, что при изменении индекса надо выполнить рендеринг? Да никак.

в консоль выводиться...

Не понимаю, зачем вы это сказали. Никакого кода с выводом в консоль показано не было.

Исправляем: в массив складываем сами компоненты вместо их экземпляров; индекс делаем состоянием; по клику на кнопки обновляем индекс; используя индекс извлекаем из массива компонент. Всё:

const Component1 = () => <h1>hello, world!!</h1>;
const Component2 = () => <h1>fuck the world</h1>;
const Component3 = () => <h1>fuck everything</h1>;

const components = [ Component1, Component2, Component3 ];

function App() {
  const [ index, setIndex ] = useState(0);
  const min = 0;
  const max = components.length - 1;

  const Component = components[index];

  const onClick = ({ target: { dataset: { step } } }) =>
    setIndex(Math.max(min, Math.min(max, index + +step)));

  return (
    <div>
      <button onClick={onClick} data-step="-1" disabled={index <= min}>prev</button>
      <button onClick={onClick} data-step="+1" disabled={index >= max}>next</button>
      {Component && <Component />}
    </div>
  );
}