/Javascript/React/Button color change loop in react

Button color change loop in react

import React, { useState } from "react";

export default function App() {
  const Colors = ["red", "green"];
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {Colors.map((color, key) => (
        <Button Color={color} Colors={Colors} key={key} />
      ))}
    </div>
  );
}

function Button({ Color, Colors }) {
  const [color, setColor] = useState(Color);
  const handleChange = (e) => {
    e.preventDefault();
    setColor(Colors[Math.floor(Math.random() * Colors.length)]);
  };
  const style = {
    backgroundColor: color
  };
  return (
    <button onClick={handleChange} style={style}>
      Click Me!
    </button>
  );
}

Source: stackoverflow.com

Similar codes

0 vote332 views1 answer
Ticking clock react js
Javascript React
0 vote308 views1 answer
How to implement certain actions after setstate in react hooks
Javascript React
0 vote336 views1 answer
Dlowlad the json fiel in react js pretty formate
Javascript React
0 vote330 views1 answer
React native getting older version assets
Javascript React
0 vote321 views1 answer
React toastify does not have design
Javascript React
0 vote331 views1 answer
Orderbychild firebase react
Javascript React
0 vote305 views1 answer
React bootstrap col not working
Javascript React
0 vote329 views1 answer
React native picker not taaking height on android
Javascript React
15 votes296 views1 answer
Did you mean to use React.forwardRef()?
Javascript React
17 votes275 views6 answers
React native build android
Javascript React