how i can change background color of full page using onclick event in reactjs?

Question

I need to solve a question that is asking to change the body background colours while clicking the button I need to change four colours how I can solve it? in react.

import React, { useState } from 'react';
import './App.css';

function App() {
 var colors=[
{
  value:1,label:"red"
},
{
  value:2,label:"green"
}
]
 var [setbgcolor,ddlvalue]=useState(colors.label)
var ddlhandle=e=>{
ddlvalue(e.label)
}
return (
<div className="App">
<style>{'body {background-color:'+setbgcolor+'}'}</style>
<button onClick={ddlhandle} >click</button>
<select options={colors} onChange={ddlhandle}></select>
</div>
);
}
export default App;

Please share the code you tried so far...

T J
– T J

2021-07-14 05:54:30 +00:00
Commented Jul 14, 2021 at 5:54 — T J
– T J, Commented Jul 14, 2021 at 5:54

TechySharnav · Accepted Answer · 2021-07-14 08:18:16Z

You would need two states, one for holding the select's value, and other for holding current bg color. Similarly, you need two handlers, one for select and other for button. Also, you need to use option element, inside select to display the options.

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

export default function App() {
  var colors = [
    {
      value: 1,
      label: "red"
    },
    {
      value: 2,
      label: "green"
    }
  ];
  var [inputValue, setInputValue] = useState(colors[0].label);
  var [bgcolor, setbgColor] = useState(colors[0].label);
  var ddlhandle = (e) => {
    setInputValue(e.target.value);
  };

  var buttonHandle = () => {
    setbgColor(inputValue);
  };
  return (
    <div
      style={{ backgroundColor: bgcolor, width: "100vw", height: "100vh" }}
      className="App"
    >
      <button onClick={buttonHandle}>click</button>
      <select onChange={ddlhandle}>
        {colors.map((color) => (
          <option value={color.label}>{color.label}</option>
        ))}
      </select>
    </div>
  );
}

CodeSandbox Link - https://codesandbox.io/s/zealous-williamson-58qf8?file=/src/App.js

Edit: Since you need to change the color of entire body, you need to set width: "100vw" and height: "100vh" of div.

Seyed Kazem Mousavi · Accepted Answer · 2021-07-14 07:22:28Z

1

you should use two className or two style for the background

and handle a parameter for change between className or style

import React, { useState } from 'react';
import './App.css';

function App() {
 var colors=[
{
  value:1,label:"red"
},
{
  value:2,label:"green"
}
]
 var [setbgcolor,ddlvalue]=useState(colors[0].label)
var ddlhandle=e=>{

ddlvalue(e.target.value)
}
return (
**<div className="App" style={{backgroundColor:`${setbgcolor}`}}>**
<button onClick={ddlhandle} >click</button>
<select options={colors} onChange={ddlhandle}></select>
</div>
);
}
export default App;

edited Jul 14, 2021 at 7:22

answered Jul 14, 2021 at 6:22

Seyed Kazem Mousavi

4572 silver badges8 bronze badges

1 Comment

Gulbahar Ali Over a year ago

Not getting results what to do? I need to submit assignment

Dharman · Accepted Answer · 2021-07-14 08:08:13Z

If you want with a single click of a button to cicle thru an array of possible colors to change the background color, you can simply store the array index of the current one and +1 to it until you reach the limit then reset back to 0.

Heres a short example:

Created an array with objects that represent what colors can be picked

const colors = [
    { title: "Red", color: "#de1212" },
    { title: "Blue", color: "#122dde" },
    { title: "Green", color: "#32a852" },
    { title: "Yellow", color: "#d7de12" }
];

Then created a state where you can store the index of the current selected color. NOTE giving a default index of 0

const [colorValue, setColorValue] = useState(0);

Then simply, create a simple method that onClick will execute. This method will increate the index by 1 until it reaches same number as there are objects in the array. Once reached the limit it will reset it to 0

  const handleClick = () =>
    setColorValue(colorValue + 1 < colors.length ? colorValue + 1 : 0);

Now in a render its up to you how you render it. I simply did this to present it

<div className="App" style={{ backgroundColor: colors[colorValue].color }}>
      <h1>Selected color: {colors[colorValue].title}</h1>
      <button className="btn" onClick={handleClick}>
        Click to change color
      </button>
</div>

Live example of this code

And if you required to do this with a select and only with a button onClick to read select value and set it as color, the situation is the same just add 1 more state where you seperatly store select value OR use a ref. The rest is the same.

Also, as a note, do not use var. Its so old. Use let, for variables that values change, and const, for variables whos value do not change.

Collectives™ on Stack Overflow

how i can change background color of full page using onclick event in reactjs?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related