State working only in console and not changed color in the page

Question

I am trying to change background color of Navbar to white on scrolling, but my code changes the state only in the console. How to solve it?

Here is React and CSS code

import React, { useState, useEffect } from 'react';
import '../index';

export default function Header() {
  const [headerColor, setHeaderColor] = useState('.header container');
  const listenScrollEvent = () => {
    window.scrollY > 250 ? setHeaderColor('#29323c') : setHeaderColor('transparent');
  };

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    window.addEventListener('scroll', listenScrollEvent);
  });
  console.log(headerColor);
  return (
    <section id="header" style={{ color: headerColor }}>
      <div className="header container" style={{ color: headerColor }}>
   

/* Header section */
#header {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100vw;
  height: auto;
}
#header .header {
  min-height: 8vh;
  background-color: rgba(31, 30, 30, 0.24);
  transition: 0.3s ease background-color;
}
#header .nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  max-width: 1300px;
  padding: 0 10px;
}

Welcome to SO, the code itself works but i think it has a couple of problems: 1. `useState(".header container")`. `.header` is not a valid class name. 2. You are saying you want to change the background color but the color attribute changes the color of the the font so it should be `background-color`. 3. This has nothing to do with your problem but you should clean up the event listener in your effect. — xtr, Oct 07 '20 at 10:28
To elaborate `header` is the name of the class `.header` is the syntax you use in css to express that you want to set attributes of a class called `header` — xtr, Oct 07 '20 at 10:33

score 0 · Answer 1 · answered Oct 07 '20 at 13:54

I would rephrase your question to: "How does state work in React?" You seem to be using a component named "Header".

import React, { useState, useEffect } from 'react';
import '../index';

export default function Header() {
  const headerColor = useState({ headerColor : 'transparant' });
  const listenScrollEvent = () => {
    window.scrollY > 250 ? setHeaderColor('#29323c') : setHeaderColor('transparent');
  };

  //well lets create a func for setHeaderColor
  setHeaderColor(color){
    this.setState({
       headerColor: color
    });
  }

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    window.addEventListener('scroll', listenScrollEvent);
  });
  console.log(headerColor);

  return (
    <section id="header" style={{ background-color: headerColor }}>
      <div className="header container" style={{ background-color: headerColor }}>

"Hooks are a new feature in React v16.7.0-alpha useState is the “Hook”. useState() set the default value of the any variable and manage in function component(PureComponent functions). ex : const [count, setCount] = useState(0); set the default value of count 0. and u can use setCount to increment or decrement the value. onClick={() => setCount(count + 1)} increment the count value.DOC " Base answer on: https://stackoverflow.com/a/53166036/4095631

Please also look at: "Updating an object with setState in React"

Updating an object with setState in React

and the official documents about state and hooks:

https://reactjs.org/docs/hooks-overview.html

State working only in console and not changed color in the page

1 Answers1