Zmienne z formularza a pozyskiwanie danych

Witam

Problem wystąpił u mnie z dość prozaiczną rzeczą jak wyświetlanie zawartości tablicy załadowanej do useRef natomiast w rezultacie dąrzę dąŻę do efektu pobierania danych z kilku pól po użyciu przycisku, które to dane mogę się wyświetlać np poniżej w liście.

Nie jestem w stanie przekazać stałej z zawartością tablicy, więc może jakaś mała podpowiedz.

Poza tym zastanawia mnie poniższy zapis :

setNextIdx(nextIdx + 1 >= props.inputCount ? 0 : nextIdx + 1);

Jak mniemam funkcja statusu, która ustawia wartość zmiennej statusu wyznacza następny indeks przekazując go poprzez obiekt props oraz argument inputCount. Pytanie tylko czemu mają służyć ,,?" oraz to 0.
jeśli ktoś wie gdzie tego szukać byłbym wdzięczny, powiedzmy jakiś link

KOD :

import React, { useRef, useState } from "react";

function Component(props) {
  const [nextIdx, setNextIdx] = useState(0);
  const [inputValue, setInputValue] = useState('');
  const inputEls = useRef([]);

  const onButtonClick = (idx) => {
    inputEls.current[nextIdx].focus();
    // Find the new next index.
    //Ustawienie nowego indeksu z pomoca obiektu useState poprzez obiekt props oraz argument input count
    setNextIdx(nextIdx + 1 >= props.inputCount ? 0 : nextIdx + 1);
    
    const listOfItems = inputEls.map(items => {
      return <li>{items}</li>
    });
  };

  /* 
  <div>
      <Component inputCount={5} />
    </div>
  */

  return (
    <>
      {Array(props.inputCount)
        .fill()
        .map((_, idx) => (
          <input
            ref={(el) => (inputEls.current[idx] = el)}
            type="text"
            style={{ display: "block", marginBottom: "0.5rem" }}
          />
        ))
        
        }
      <button onPress={onButtonClick}>Tab through inputs</button>
      <ul>{listOfItems}</ul>
    </>
  );
}

export default Component;

setNextIdx(nextIdx + 1 >= props.inputCount ? 0 : nextIdx + 1);

Ten "dziwny" zapis to tak zwany ternary operator - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_operator.
Czyli jest to taka skrócony/trochę inaczej zapisany IF.
Inaczej mówiąc można to tak wyjaśnić: warunek ? wartość_jeśli_true : wartość_jeśli_false.

W Twoim przypadku oznacza to, że:

1. warunek (nextIdx + 1 >= props.inputCount) sprawdza czy po zwiększeniu indeksu wychodzimy poza liczbę inputów
2. jeżeli tak to 0 - ustawiamy wartość na zero, czyli wracamy do pierwszego
3. jeżeli nie to nextIdx + 1 przechodzimy do kolejnego elementu/zwiększamy indeks o jeden.

W funkcji od obsługi przycisku masz

const listOfItems = inputEls.map(items => {
      return <li>{items}</li>
    });

a w widoku robisz

<ul>{listOfItems}</ul>.

Przecież to są kompletnie inne scopy. Dla <ul> nie istnieje listOfItems.

Przy okazji zrób sobie prosty console.log(inputEls) Nie jestem w jednym miejscu robisz inputEls.current w inny zaś tylko inputEls.map
Nie możesz zapisywać w useState danych inputu zamiast używać refa (Niech każdy input ma swój id)?

Następnie nigdzie nie inicjujesz danych dla inputEls, ale w inputEls.current[idx] próbujesz odczytać index tablicy , który nie istnieje.