score:2
you haven't shown your full class so i don't know where this.state.sunrise
and this.state.sunset
is coming from, but i'm betting they're not set properly when you call this.daytime()
in componentdidmount
.
either initialize them properly in your constructor or make sure you update the background of body whenever they are modified.
the best way of doing it is your second, working, example since that's automatically run whenever the state changes - it also doesn't modify the dom outside of the react tree, which is good practice.
score:0
use isdaytime
as a state and manipulate the classes based on that. the daytime
function can even be private outside of class (if it not uses state variables).
js
import classnames from 'classnames'
class wallpaper extends component {
state = {
isdaytime: daytime();
}
render() {
const { isdaytime } = this.state;
return (
<div classname={classnames('bg', {
bg__daytime: isdaytime
bg__sunset: !isdaytime
})} />
)
}
}
css
.bg {
...
}
.bg__daytime {
background-image: url(day_img.png);
}
.bg__sunset {
background-image: url(night_img.png);
}
Source: stackoverflow.com
Related Query
- ternary operator issue in React return
- Ternary operator issue in React's componentDidMount()
- Ternary Operator if else if issue
- ternary operator in jsx to include html with react
- Ternary operator on style with React Js Es 6
- multiple condition in ternary operator in jsx
- React className with ternary operator add class 'null'
- Utilizing AND statement (two conditions) inside react ternary operator
- react render Logical && vs Ternary operator
- ternary operator inside map
- Why can't I use a ternary operator and arrow function in this way in JSX?
- How to have two function calls inside ternary operator in JSX?
- React Styled Components conditional ternary operator
- Using OR in ternary operator
- Ternary operator for Setstate
- Ternary operator inside an object in JS
- How to use the ternary operator in react using javascript styled components?
- How to use ternary operator in the render method in reactjs?
- Ternary operator inside useState. Is it correct?
- Ternary operator in map() react
- Ternary operator fails when used to set value of datalist option in React component
- Showing elements based on ternary operator
- Why is ternary operator in jsx not working
- How to use write ternary operator for click event in React.js
- How to use ternary operator in return statement that returns an array
- React ternary operator - cannot render component
- How to use ternary operator within the jsx of a react component along with typescript?
- how correctly use ternary operator in react js?
- Ternary Operator (Inline If without Else)
- Typescript optional chaining combined with ternary operator parsing error
More Query from same tag
- Changing components based on url with react router
- How to filter json data with multiple includes values
- Is there a way with React Slick to have a Carousel inside a Carousel?
- Pressing tab key closes Material UI Dialog that is opened from a submenu
- How to render a list of users from ReqRes API with React
- function onHandleChange won't work until after I've selected both options in the select tag
- How to initialize state with api's data
- React post request from react component
- My useState in React/NEXTjs is not appending the result from a socket.io event from the server, just overwriting it
- Test setting text value with React and Enzyme
- Remove empty elements from an array in JavaScript Reactjs
- Wrap multiple strings in HTML the React way
- How to combine React-Spring useTrail and useTransition on same elements?
- ReactJS - Nothing was returned from render
- Password and Confirm Password validation on input with Joi
- Property 'posts' does not exist on type 'Readonly<{}>'
- Jest: SVG require causes "SyntaxError: Unexpected token <"
- Deleting JSON object based on attribute
- how do I call or pass the value from one js file to another file in react js
- Can I pass simple arrays in redux state?
- How not to be fixed by one option in React?
- React Context Api using function from context provider
- Add event listener on scroll of dropdown select options and fetch data using react-async-select
- How to test React with hooks and PubSub-js with Jest Enzyme
- How can I run a react-spring animation in reverse?
- Logical understanding react hooks, difference between useState and useEffect (or state and lifecycle methods)
- Manual innerHTML modification on DOM halts ReactJS listeners
- Victory Charts - tooltip on line chart
- Styling React Component with class
- How To Update Structure of Redux State Persisted In LocalStorage