CODEWITHSUNDEEP
javascriptreactjsscroll
Gerardo Bautista
Gerardo Bautista

Reputation: 891

Error mensage "state is not defined" in Meteor + React.

Which is wrong with this function, I try to fade the Navbar at the time of scrolling but it throws me an error in the following function?

const opacity = Math.min(100/state.alturaActualScroll, 1);

i have my navbar component but tells me that the state has not been defined but I do not know because the error, this is my code

import React from 'react';
import {Link} from 'react-router'
import { Accounts } from 'meteor/accounts-base';
import {Meteor} from 'meteor/meteor';

export default class NavbarLanding extends 
React.Component {


    componentDidMount() {
        window.onscroll =()=> {
            this.setState({
                alturaActualScroll: window.scrollY})
        }
    }
    componentDidMount () {
        window.onscroll =()=>{
            nuevaAlturaScroll = Math.ceil(window.scrollY / 50) *50;
            if(this.state.alturaActualScroll != nuevaAlturaScroll){
                this.setState({alturaActualScroll:nuevaAlturaScroll})
            }
        }
    }
      // update
    render() {
        // console.log('donde estoy');
        const opacity = Math.min(100/state.alturaActualScroll, 1);
        return(
        <div style={opacity}id="navbar"className="navbar-landing">
            <nav>
                <div>
                        <ul className="ul-landing">
                                {/* <img src="./public/images/flat-rocket.jpg"></img> */}
                                <li id="navbar-landing-title" className="navbar-title"><a>Landing </a></li>
                            <div id="menu-landing"className="navbar-menu">
                                <li><a>acerca</a></li>
                                <li><a>portafolio</a></li>
                                <li><a>contacto</a></li>
                                <button className="btn"onClick={() => Accounts.logout()}>Logout</button>
                            </div>
                        </ul>
                </div>
             </nav>
        </div>  
        );
    };
}   

NavbarLanding.reactProptype = {
    title: React.PropTypes.string.isRequired
};

Upvotes: 0

Views: 52

Answers (1)

palsrealm
palsrealm

Reputation: 5243

Your code should be 

const opacity = Math.min(100/this.state.alturaActualScroll, 1);

You forgot to add the this keyword while accessing the state of the component, which led the interpreter to look for a local variable named state instead of the class level state variable.

Edited and corrected after comments from Felix Kling and zerkms

Upvotes: 1

Related Questions