Breaking News: Grepper is joining You.com. Read the official announcement!

How to change image and background color every x seconds. React

ayesha abid answered on October 20, 2022 Popularity 1/10 Helpfulness 1/10

answer How to change image and background color every x seconds. React

How to change image and background color every x seconds. React

Comment

import React from "react";

const colors = ["#92c952", "#771796", "#24f355", "#d32776", "#f66b97"];

const images = [
  "https://via.placeholder.com/150/92c952",
  "https://via.placeholder.com/150/771796",
  "https://via.placeholder.com/150/24f355",
  "https://via.placeholder.com/150/d32776",
  "https://via.placeholder.com/150/f66b97"
];

export default function App() {
  const [value, setValue] = React.useState(0);

  React.useEffect(() => {
    const interval = setInterval(() => {
      setValue((v) => {
        return v === 4 ? 0 : v + 1;
      });
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div className="App" style={{ backgroundColor: colors[value] }}>
      <img src={images[value]} alt="img" style={{ border: "3px solid" }} />
    </div>
  );
}

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: background-color image javascript

Link to this answer
Share Copy Link

Contributed on Oct 20 2022

ayesha abid

0 Answers Avg Quality 2/10

How to change image and background color every x seconds. React

Contents

More Related Answers

How to change image and background color every x seconds. React

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.