How to add css class based on function in React / Next js?

Question

I'm using Next js and react visibility sensor to let me know when a div is visible on screen.

Code kinda looks like:

import VisibilitySensor from "react-visibility-sensor";


function onChange(isVisible) {
  let colorstate = isVisible ? "test" : "test dark";
  console.log(colorstate)
}

export default function Home() {
  return (
              <VisibilitySensor onChange={onChange}>

                <div className={colorstate}>this is a test div.</div>

              </VisibilitySensor>
);
}

Changing the div className to the {colorstate} variable doesn't work (returns undefined).

I'm fairly new to React and I tried various answers online using "this.state" methods which all didn't work.

Right now the onChange function works fine and prints the correct class name in the log, I just don't know how to associate it with the div.

Thanks.

ar2r · Accepted Answer · 2020-08-11 08:02:37Z

2

You can use useState hook, this is how it would look like with initial className of 'test dark'

import VisibilitySensor from "react-visibility-sensor";
import {useState} from 'react'

export default function Home() {
const [colorState, setColorState] = useState('test dark')

const onChange = (isVisible) => {
  isVisible ? setColorState("test") : setColorState("test dark");
}

  return (
              <VisibilitySensor onChange={onChange}>

                <div className={colorState}>this is a test div.</div>

              </VisibilitySensor>
);
}

answered Aug 11, 2020 at 8:02

ar2r

1583 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kampaii · Accepted Answer · 2020-08-11 11:10:59Z

2

seems your colorState variable is visible only through the onChange.

class Home extends React.Component{

    constructor(props){
        super(props);
        this.state = 
        {
            dark: true
        }
        
    }

    test = () => {
        this.setState(
            {
                dark: !this.state.dark
            }
        )
    }

    render(){
        return(
        <div className={this.state.dark ? "dark" : "white"} onClick={this.test}>
            test
        </div>
        );
    }
}

should work

edited Aug 11, 2020 at 11:10

answered Aug 11, 2020 at 8:02

Kampaii

3114 silver badges15 bronze badges

2 Comments

Tester_Y Over a year ago

Thanks for the answer! This is unfortunately not working (also changed the console.log to the new variable state). If I set the initial state as either light or dark, that gets passed to the div. However when the onChange function is run, the only thing that happens is the console logs the new state, but it doesn't get transferred to the className of the div :(

Kampaii Over a year ago

this style will work if you define your component as an ECMA6 class. updated the answer

Collectives™ on Stack Overflow

How to add css class based on function in React / Next js?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related