/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

112 votes150 views6 answers
Import bootstrap 4 in react
Javascript React
6 votes128 views1 answer
React state management
Javascript React
0 vote123 views1 answer
Usenavigate react router dom v6
Javascript React
0 vote129 views1 answer
Form.Control textarea react bootstrap
Javascript React
1 vote87 views1 answer
Parent to child react state
Javascript React
0 vote133 views1 answer
Module not found: Can't resolve '@date-io/date-fns' in 'C:\Users\61455\Documents\React apps\mya2o\src\pages'
Javascript React
20 votes138 views4 answers
On enter key press react
Javascript React
0 vote140 views1 answer
Create react app run test apecific folfer
Javascript React
0 vote150 views2 answers
Remove state from location on page load in react router dom
Javascript React
0 vote220 views1 answer
How to change tab color react bootstraps customixation
Javascript React