I'll keep this quick. How do I make body of page change color when I click button, it should pass random color from Array of colors and change from old color to new color, animated forward on 1 second.

Here is literally what I'm trying to do, except it's in jQuery (Not sure, not that good in Web Dev yet) and I need to do same in React.

(For some reason I can't post CodePen link without embedding some code, so here's the sample of what I'm trying to do)

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
      );

EDIT: Thanks to BenM for answering, what a simple solution!

I'm using this code on my button and it works perfectly.

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