Mantendré esto rápido. ¿Cómo hago para que el cuerpo de la página cambie de color cuando hago clic en el botón? Debería pasar un color aleatorio de la matriz de colores y cambiar del color anterior al nuevo, animado hacia adelante en 1 segundo.

Aquí está literalmente lo que estoy tratando de hacer, excepto que está en jQuery (no estoy seguro, todavía no es tan bueno en Web Dev) y necesito hacer lo mismo en React.

(Por alguna razón, no puedo publicar el enlace CodePen sin incrustar algún código, así que aquí está la muestra de lo que estoy tratando de hacer)

https://codepen.io/freeCodeCamp/pen/qRZeGZ

 var colors = [ '#16a085', '#27ae60', '#2c3e50', '#f39c12', '#e74c3c', '#9b59b6', '#FB6964', '#342224', '#472E32', '#BDBB99', '#77B1A9', '#73A857' ]; var color = Math.floor(Math.random() * colors.length); $('html body').animate( { backgroundColor: colors[color], color: colors[color] }, 1000 );

EDITAR: Gracias a BenM por responder, ¡qué solución tan simple!

Estoy usando este código en mi botón y funciona perfectamente.

 document.body.style = 'background-color:' + colors[Math.floor(Math.random() * colors.length)] + '; transition: 1s';