I am new to react, and I am having a little issue. Maybe somebody can help me out.
So the issue is that I am unable to triger the element I want with onCLick function. Now I am trying to remove the navigation when
import React from "react";
import ReactDOM from "react-dom";
export default class Nav extends React.Component {
constructor() {
super();
this.state = {navStatus: "navHide"};
}
navClose() {
var navOpened = document.getElementById("myNav");
navOpened.setState({navStatus: "navHide"});
}
navOpen() {
this.setState({navStatus: "navShow"});
}
render() {
return(
<nav onClick={this.navOpen.bind(this)}>
<div id="myNav" className={this.state.navStatus}>
<div className="navClose" onClick={this.navClose.bind(this)}>
<object className="navCloseBtn" type="image/svg+xml" data="svg/close.svg"></object>
</div>
</div>
</nav>
);
}
}
The error I am having is
nav.js:12 Uncaught TypeError: navOpened.setState is not a function
Also if you notice some patterns that I could improve in my code, I would really appreciate the feedback.
Thank You!
We have to set initial state value inside constructor function and set click event handler of the element upon which click, results in changing state. Then pass the function to the click handler and change the state of the component inside the function using setState.
You can't directly call setState on a parent component from a child component because the updating of a component state is restricted to the current component. To handle this, simply pass a function from the parent to the child that contains setState .
Only react components have setState
method.
Working example:
import React from "react";
import ReactDOM from "react-dom";
export default class Nav extends React.Component {
constructor() {
super();
this.state = {
navStatus: "navHide"
};
this.navClose = this.navClose.bind(this);
this.navOpen = this.navOpen.bind(this);
}
navClose(e) {
e.stopPropagation();
this.setState({
navStatus: "navHide"
});
}
navOpen() {
this.setState({
navStatus: "navShow"
});
}
render() {
return(
<nav onClick={this.navOpen}>
<div id="myNav" className={this.state.navStatus}>
<div className="navClose" onClick={this.navClose}>
<object
className="navCloseBtn"
type="image/svg+xml"
data="svg/close.svg"
></object>
</div>
</div>
</nav>
);
}
Also you should bind event handlers in constructor instead of render
method.
import React from "react";
import ReactDOM from "react-dom";
export default class Nav extends React.Component {
constructor() {
super();
this.state = {navStatus: "navHide"};
}
navClose() {
var navOpened = document.getElementById("myNav");
this.setState({navStatus: "navHide"});
}
navOpen() {
this.setState({navStatus: "navShow"});
}
render() {
return(
<nav onClick={this.navOpen.bind(this)}>
<div id="myNav" className={this.state.navStatus}>
<div className="navClose" onClick={this.navClose.bind(this)}>
<object className="navCloseBtn" type="image/svg+xml" data="svg/close.svg"></object>
</div>
</div>
</nav>
);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With