вывести рандомный масссив через в реакте

Question

Дано: массив, из которого по нажатию кнопки нужно показать рандомное слово. Я понимаю, что нужно использовать useState и нет никаких проблем сделать это для стринга или числа, но никаких не отрендить для массива:

import { useState } from "react";
import "./RandomBrand.css";

function RandomBrand(): JSX.Element {


const [arrShoes, setShoes] = useState(["Adidas", "Nike", "Brandon Shoes", "Reebok", "Fila"])
const shoes = arrShoes[Math.floor(Math.random()*arrShoes.length)];

function getRandomBrand (): void {

    setShoes(shoes)
}

    return (
        <div className="RandomBrand">

         <button onClick={getRandomBrand}>Show me!</button>
         <span>Random shoe is: {shoes}</span>
            
        </div>
    );
}

export default RandomBrand;

Answer 1

Все тоже самое надо делать, только в переменную сохранять элемент массива.

function RandomBrand(): JSX.Element {
  const [arrShoes, setShoes] = useState(["Adidas", "Nike", "Brandon Shoes", "Reebok", "Fila"]);
  const [shoes, selectShoes] = useState('Не выбрано');

  function getRandomBrand (): void {
    const random = Math.floor(Math.random() * arrShoes.length);
    selectShoes(arrShoes[random]);
  }

  return (
    <div className="RandomBrand">

      <button onClick={getRandomBrand}>Show me!</button>
      <span>Random shoe is: {shoes}</span>

    </div>
  );
}

Что у вас происходило:

Когда компонент рендерился, переменная arrShoes становилась массивом.
На следующей строке вы присваивали переменной shoes один из элементов массива arrShoes.

При нажатии на кнопку, вы переписывали переменную arrShoes на значение переменной shoes и теперь переменная arrShoes строка.
На следующей строчке вы переменной shoes присваиваете букву по из строки.

БЛОГ НА HUSL

вывести рандомный масссив через в реакте

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