Отображение случайной строки из массива одним нажатием кнопки [React]

Question

Я пытаюсь создать простое приложение, которое отображает случайный вопрос. Я могу успешно отобразить случайную строку из массива при монтировании и обновлении страницы sh.

Я хотел бы отобразить другой случайный вопрос «onClick» кнопки, а не обновить sh страницу?

Вот код на данный момент:

export const QuestionContainer = () => {
  const [response, setResponse] = useState({});

  useEffect(() => {
    fetchData().then(res => setResponse(res));
  }, []);

  const { records = [] } = response;

  const questions = records.map(record => record.fields.question);

  console.table(questions);

 // const randomNum = arr => {
 //   return Math.floor(Math.random() * arr.length);
 //  };

  return (
    <div className='questions-container'>
      <h1>{questions[0]}?</h1>
      <button onClick={() => console.log('more')}>More</button>
    </div>
  );
};

const questions пример массива строк - ['hello', 'world', 'noob question']

Answer 1

Ты очень близко! Просто используйте onClick, чтобы установить отображаемый индекс, и вы - золотой! Это должно работать:

const randomIndex = (arr) => { // returns a random int value to use as an index
    return Math.floor(Math.random() * arr.length)
}
export const QuestionContainer = () => {
  const [response, setResponse] = useState({});
  const [index, setIndex] = useState(0) // 0 initially, as you had in your example

  useEffect(() => {
    fetchData().then(res => setResponse(res));
  }, []);

  const { records = [] } = response;

  const questions = records.map(record => record.fields.question);

  console.table(questions);

  return (
    <div className='questions-container'>
      <h1>{questions[index]}?</h1>
      <button onClick={_ => setIndex(randomIndex(questions)}>More</button>
    </div>
  );
};