Как исправить ошибку присваивания backgroundColor?

Question

При присвоении backgroundColor случайному div появляется ошибка: "TypeError: Cannot set property 'backgroundColor' of undefined" (82 line)

79 | const randomNumber = Math.floor(Math.random() * 25);
80 | 
81 | 
82 | duel[randomNumber].style.backgroundColor='blue';



render(){
    const duel = ['duel1', 'duel2', 'duel3', 'duel4', 'duel5', 'duel6',
            'duel7', 'duel8', 'duel9', 'duel10', 'duel11', 'duel12', 'duel13',
            'duel14', 'duel15', 'duel16', 'duel17', 'duel18', 'duel19', 'duel20',
            'duel21', 'duel22', 'duel23', 'duel24', 'duel25'];

    const randomNumber = Math.floor(Math.random() * 25);
    duel[randomNumber].style.backgroundColor='blue';

    return (
            <div>
                 <div>
                    <button>Play</button>
                </div>
                 <div>
                    here it is 25 div      
                </div>
            </div>
        )
}

В чем может быть проблема?

Answer 1

я думаю, что это больше, чем вы собираетесь, вам нужно добавить какой-то идентификатор к div, а затем getElementsByClassName (в случае имени класса), чтобы получить фактический элемент вместо просто строки.

render(){
const duel = ['duel1', 'duel2', 'duel3', 'duel4', 'duel5', 'duel6',
            'duel7', 'duel8', 'duel9', 'duel10', 'duel11', 'duel12', 'duel13',
            'duel14', 'duel15', 'duel16', 'duel17', 'duel18', 'duel19', 'duel20',
            'duel21', 'duel22', 'duel23', 'duel24', 'duel25'];

const randomNumber = Math.floor(Math.random() * 25);
const elementClassName = duel[randomNumber]
document.getElementsByClassName(elementClassName).style.backgroundColor='blue';

 return (
            <div>
                 <div>
                    <button>Play</button>
                </div>
                 <div className='duel25'>
                    here it is 25 div      
                </div>
            </div>
        )
    }

Answer 2

duel не является ни элементом DOM, ни элементом React со свойством style; это строка.

Если вы хотите случайным образом изменить цвет фона какого-либо элемента, попробуйте:

1. Создать элемент React (или элемент DOM, например, <div />) ).
2. Поместить элемент в массив (например, duel).
3. Изменить стили с помощью duel[randomNumber].style.backgroundColor='blue';