CODEWITHSUNDEEP
javascriptreactjs
Cosmos
Cosmos

Reputation: 121

React state toggle render not persisting

I am rendering my component when a link in my footer is clicked, however the element is almost immediately re-rendered away.

class Footer extends Component {
constructor(props) {
    super(props);
    this.state = {
        privacyVisibile: false
    };
    this.togglePrivacyVisible = this.togglePrivacyVisible.bind(this)
}

togglePrivacyVisible = () => {
    const { privacyVisibile } = this.state;
    this.setState({ privacyVisibile : !privacyVisibile })
}

render() {
    return (
        <div>
            {this.state.privacyVisibile && <Privacy />} 
            <ul className="footer-menu">
                <li><a href="about.html">About</a></li>
                <li onClick= {this.togglePrivacyVisible}>Privacy</li>
            </ul>                            
        </div>
    )
 }
}

export default Footer;

If I move the state rendering from above my UL to below it it doesn't render at all when I attempt to toggle.

I've seen suggestions to restart my app but that seems to have no effect, any other ideas what may be happening here?

Upvotes: 1

Views: 244

Answers (3)

Corwin Marsh
Corwin Marsh

Reputation: 1

I don’t think you need to use arrow function syntax for your function AND bind(this) in your constructor. Not sure if that causes odd behavior but you should use one or the other.

Upvotes: 0

pigeontoe
pigeontoe

Reputation: 486

When the link is clicked the browser navigates away from the page and attempts to load the privacy.html page. Try using a button instead of a link, no href:

<button onClick={this.togglePrivacyVisible}>Privacy</button>

Upvotes: 1

maazadeeb
maazadeeb

Reputation: 6112

You could prevent the default action of a click on an anchor tag, by using Event#preventDefault. Like:

togglePrivacyVisible = (event) => {
    event.preventDefault();
    const { privacyVisibile } = this.state;
    this.setState({ privacyVisibile : !privacyVisibile })
}

Upvotes: 1

Related Questions