Currently delving into the world of React.
Learning about states/props and the art of dynamically altering elements. I've set up the component states like this:
constructor(props) {
super(props);
this.modifyStyle = this.modifyStyle.bind(this);
this.state = {
navigation: [
{ route: "/", title: "Home" },
{ route: "/about", title: "About Me" },
{ route: "/portfolio", title: "Portfolio" },
{ route: "/contact", title: "Contact" },
{ route: "/", title: "Services" },
],
styling: "nav",
};
}
Focusing on the "Styling" state.
The purpose is to style the list element as seen here:
render() {
return (
<div>
<div className="trigram">
<p>☰</p>
</div>
<ul className={this.state.styling}>
{this.state.navigation.map((items) => (
<NavItem route={items.route} title={items.title} />
))}
</ul>
</div>
);
The CSS for the "Styling" state is defined as follows:
.nav {
width: 100%;
float: left;
list-style: none;
padding: 15px;
transition: 1s;
}
This setup, along with relevant li styling, yields the following result on the webpage:
[![Screenshot of menu][1]][1]
The objective is to adjust the list style to a smaller one upon a "Scroll" event using this function:
componentDidMount() {
document.addEventListener("scroll", this.modifyStyle, true);
}
modifyStyle = () => {
this.setState({
styling: "nav2",
});
};
The "nav2" style in question should mirror the main menu style but with reduced padding:
.nav2 {
width: 100%;
float: left;
list-style: none;
padding: 5px;
transition: 1s;
}
Upon execution, everything seems to work fine initially. However, the updated styling ends up distorted and stuck in this shape:
[![screenshot issue][2]][2]
No clear explanation as to why this occurs persists, despite attempts made at debugging the CSS code. It appears that the Styling just refuses to cooperate in this particular scenario.
Suspecting it may involve how React handles states, although uncertain. Any insights would be highly valued.
TIA [1]: https://i.sstatic.net/bK1dt.png [2]: https://i.sstatic.net/w7Wh2.png