How to use array method to change different color on div in. In single button reactjs click-CodePudding

import { use state } from 'react';
import React from 'react'; 
import './style.css';
    
export default function Div() { 
    const [data, set data] = useState('green');
    return ( 
        <div  style={{ 'background-color': data }}>
        {data}
        <button on Click={() => setData('red', 'orange')}>state click 
    ); 
}

CodePudding user response：

First => You should remove the space between the words "set" and "data" like this:


const [data, setData] = useState('green');

Second => in the style attribute just the second argument is a string, but in this case you will have to use "Template literals" using backticks(`) like this:


<div  style={{ background-color: `${data}`}}>

CodePudding user response：

I've fixed the typos and errors in your code, and it seems to be working fine.

import { useState } from "react";
import React from "react";
import "./style.css";

export default function Div() {
  const [data, setData] = useState("green");
  return (
    <div  style={{ "background-color": data }}>
      <button onClick={() => setData("orange")}>state click</button>
    </div>
  );
}

it changes the background color to orange when the button is clicked, but I still don't understand, do you want to change the color of the background based on an array of colors? if so you can do it using the Math.random, on each click a random item from the colors array will be generated.

import { useState } from "react";
import React from "react";
import "./style.css";

export default function Div() {
  const [data, setData] = useState("green");
  const handleColorChange = () => {
    const colors = ["orange", "green", "red", "black"];
    var colorItem = colors[Math.floor(Math.random() * colors.length)];
    setData(colorItem);
  };
  return (
    <div  style={{ "background-color": data }}>
      <button onClick={() => handleColorChange}>state click</button>
    </div>
  );
}

CodePudding user response：

Here is short explanation

First: The state is used to store things which change.

The array of colours isn't going to change, so don't store it in the state.

The selected colour is going to change, so do store that in the state. In this case, you can do that by using the index of the colour in the array.

Next, when the colour changes, you want to pick the next one. That's just a matter of incrementing the index. However, when you get to the end you'll probably want to loop back. So check for that.

Third, since you only want one button, create only one button. Don't loop over the array of colours there.

Use the value from the state to assign the background colour.

onclick is onClick in React.

Just pass the function for setting the nextColour. It doesn't need any arguments.

Finally, if you want an HTML button element then it is . Starting a JSX name with a capital letter means you are using a component. There are plenty of third-party Button components, but you aren't importing any. Trying to use here would be recursively using the component you just created.

import React, { useState } from "react";

const colours = ['red', 'green', 'blue', 'orange', 'yellow'];

export function Button(props) {
    const [selectedColourIndex, setColourIndex] = useState(0);

    const nextColour = () => {
        const newColourIndex = selectedColourIndex   1;
        if (colours[newColourIndex]) 
            setColourIndex(newColourIndex);
        else
            setColourIndex(0);
    }

    return (<button type="button" style={{backgroundColor: colours[selectedColourIndex]}}
            onClick={nextColour}>Change color</button>);
}