I am using infinite scroll, the style was applied only to already rendered array items and not freshly rendered array items...how can I apply this to all the future rendering array items? I am fetching data in the form of an array. I first iterated array items and added background color and text color to the already rendered items but as the infinite scroll works, it rendered another set of array elements so how can I apply this background color and text color across all the components?
const toggleModefunc = (props) => {
if (Mymode === "light") {
setMymode("dark")
document.body.style.backgroundColor = "#042743";
const elements = document.querySelectorAll(".card-body")
elements.forEach(elems => {
elems.style.backgroundColor = "#042743";
elems.style.color = "#fff"
});
}
else {
setMymode("light")
document.body.style.backgroundColor = "white";
const elements2 = document.querySelectorAll(".card-body")
elements2.forEach(elems => {
elems.style.backgroundColor = "#fff";
elems.style.color = "black"
});
}
}
// The map function
{this.state.articles.map((element) => {
return (
<div className="col-md-4" key={element.url}>
<Newsitem
title={element.title ? element.title : ""}
description={
element.description ? element.description : ""
}
imageurl={element.urlToImage}
newsUrl={element.url}
author={element.author}
date={element.publishedAt}
source={element.source.name}
/>
</div>
Technically you can do something like this in react
Lets just assume NewsItem is .card-body, and isDark can represent your state. I'll assume the default of your state is set to light theme.
The state will change based on your button click, which will change the color for the items within the array.
{
this.state.articles.map((element) => (
<div className="col-md-4" key={element.url}>
<Newsitem
className={`card-body ${isDark ? : 'dark-class' : 'fff'`}} // maybe you can add a custom css class for dark theme
title={element.title ? element.title : ""}
description={element.description ? element.description : ""}
imageurl={element.urlToImage}
newsUrl={element.url}
author={element.author}
date={element.publishedAt}
source={element.source.name}
/>
</div>
));
}