Question 259204 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Creating a background color changer

import { useState } from "react"

function App() {
  const [color, setColor] = useState("olive")

  return (     
       <div className="w-full h-screen duration-200"
        style={{backgroundColor: color}}
      
       ></div>   
  )
}

export default App

Above code is not giving output.

I tried to change the background color but got the output with blank page.

Tags:

2

Answers


  1. 0

    It should work but your div dimensions are 0.

    style={{backgroundColor: color, width:"100%", height: "100%"}}
    Login or Signup to reply.
  2. 0

    Is your <App> being rendered to a page element?

    const { useState } = React;

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

const rand = (arr) => arr[Math.floor(Math.random() * arr.length)];

const App = () => {
  const [color, setColor] = useState('olive');

  return (     
    <div
      className="w-full h-screen duration-200 cursor-pointer"
      style={{backgroundColor: color}}
      onClick={e => setColor(rand(COLORS))}
    ></div>   
  )
}

ReactDOM
  .createRoot(document.getElementById("root"))
  .render(<App />);
    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search