/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

7 votes197 views1 answer
React Hook "React.useState" is called in function "placeItem" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
Javascript React
24 votes262 views3 answers
Reactjs sass setup
Javascript React
10 votes192 views4 answers
React hooks
Javascript React
0 vote180 views1 answer
Dropdown list value react fragment
Javascript React
16 votes196 views1 answer
DangerouslySetInnerHTML did not match error in React
Javascript React
0 vote180 views2 answers
Hot reload problem react 17
Javascript React
0 vote186 views1 answer
React input cursor jump end
Javascript React
0 vote215 views2 answers
Airbnb react native eslint
Javascript React
10 votes192 views2 answers
React-native text overflow ellipsis
Javascript React
-1 vote199 views2 answers
How to validate date in react
Javascript React