[djekokma]

Случайному DIVу, выбранному с помощью math.random по нажатию button присвоен синий цвет. Как в этом же случайном DIVе по клику мышки изменить цвет на другой (скажем,-зеленый)?

import React, { Component } from 'react';
import'./game.css'
 
export default class Game extends Component {
 
    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 numRandom = () => {
       let randomNumber = duel[Math.round(Math.random() * 24 + 1)];
       let rancell = document.getElementById(randomNumber).style.background = 'blue';
       };
 
        return (
            <div className={'game'}>
                     <div>
                        <button onClick={numRandom}>Play</button>
                    </div>
                
 
                <div>
                    <div className='cell' id='duel1'></div>
                    <div className='cell' id='duel2'></div>
                    <div className='cell' id='duel3'></div>
                    <div className='cell' id='duel4'></div>
                    <div className='cell' id='duel5'></div>
 
                    <div className='cell' id='duel6'></div>
                    <div className='cell' id='duel7'></div>
                    <div className='cell' id='duel8'></div>
                    <div className='cell' id='duel9'></div>
                    <div className='cell' id='duel10'></div>
 
                    <div className='cell' id='duel11'></div>
                    <div className='cell' id='duel12'></div>
                    <div className='cell' id='duel13'></div>
                    <div className='cell' id='duel14'></div>
                    <div className='cell' id='duel15'></div>
 
                    <div className='cell' id='duel16'></div>
                    <div className='cell' id='duel17'></div>
                    <div className='cell' id='duel18'></div>
                    <div className='cell' id='duel19'></div>
                    <div className='cell' id='duel20'></div>
 
                    <div className='cell' id='duel21'></div>
                    <div className='cell' id='duel22'></div>
                    <div className='cell' id='duel23'></div>
                    <div className='cell' id='duel24'></div>
                    <div className='cell' id='duel25'></div>
                </div>
            </div>
        );
    };
}