Triggering animation via setState not working

Question

I am calling a function when I hit a waypoint in my page. The function logs the state after calling setState, which shows that the state has been updated to {visible: true} however, in React Dev Tools, it shows that the state is still false. Because the state is still false, the Animated component isn't visible. If I change visible to true using React Dev Tools, the Animated component becomes visible.

I think my problem is because my setState isn't updating the component state outside of the function call, this would explain why logging the component's state shows as updated in console but not triggering a rerender nor making the Animated component's isVisible property set to true via the state attribute.

This is the component I am working on

import React, { Component } from 'react'

import { Waypoint } from  'react-waypoint'
import { Animated } from 'react-animated-css'

export default class About extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };

    this.OnEnter = this.onEnter.bind(this);
  }


  onEnter({ currentPosition }){
        this.setState({
            visible: true
        });
        console.log(this.state);
  };

  render() { 
    return (
            <Waypoint onEnter={this.onEnter}></Waypoint>
            <Animated animationIn="fadeInUp" isVisible={this.state.visible}>
                <h2 className="mb-4">About Me</h2>
                <p>A small river named Duden flows by their place and supplies it with the necessary nutrients.</p>
            </Animated>
    );
  }
}

Answer 1

Posting my comment as the answer.

There is a typo error.

Please update the line this.OnEnter = this.onEnter.bind(this); to this.onEnter = this.onEnter.bind(this);.