React method not firing when passed to child as props and called as onClick callback

Apologies in advance I’m still a newb.

Hello, I am trying to pass a method in props to a child component and fire it when clicking on a div. It seems as though i did the exact same thing with a previous component in this project and I can’t seem to figure out what I’ve done wrong this time. The problem is with the forward method in the parent component. I did the exact same thing with the fadeSplash method and it works fine.

When I check props in development tools the props shows the function and I can even get the method to execute on render if i add () to the end of this.props.forward I have attempted to bind this with an arrow funciton in the onClick={} callback, and still doesnt seem to work, even though I shouldn’t need to do that because I declared it as n arrow function in the parent element. I do not unnderstand what i’m not seeing. Here are the parent and child components.

import React, { Component } from 'react';
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faStar } from '@fortawesome/free-solid-svg-icons'
import { faWater } from '@fortawesome/free-solid-svg-icons'
import { faAngleRight } from '@fortawesome/free-solid-svg-icons'
import { faAngleLeft } from '@fortawesome/free-solid-svg-icons'
import NavBar from './components/NavBar';
import Slideshow from './components/Slideshow'
import ContactInfo from './components/ContactInfo'
import Menu from './components/Menu'
import Testimonial from './components/Testimonial'
import MeetTheTeam from './components/MeetTheTeam'

import './App.css';

library.add(faWater, faStar, faAngleRight, faAngleLeft)

class App extends Component {

  state = {
    splash: true,
    menu: false,
    animate: true

  fadeSplash = () => {
    this.setState({ splash: !this.state.splash, menu: !, animate: !this.state.animate });

  forward = () => {
    alert('Finally working...');

  render() {
    return (
      <div className="App">
        <NavBar fadeSplash={this.fadeSplash}/>
        <div id="contentWrapper">
          <Slideshow animate={this.state.animate} visible={this.state.splash?'fadeIn':'fadeOut'}/>
          <Menu visible={'fadeIn':'fadeOut'}/>
          <MeetTheTeam forward={this.forward}/>

export default App;

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import sam from '../samAfterFight.jpg';
import jamie from '../meetJamie.jpg'

export class MeetTheTeam extends Component {

  state = {
    member: sam,
    name: 'sam'

  render () {
    return (
      <div id="meetContainer">
        <h1 id="meetTitle">Meet the Team</h1>
        <img id='meetImg' src={this.state.member === sam ? sam : jamie} alt=""/>
        <div id="meetText">
          <p id="name"></p>
          <p id="info"></p>
        <div id="arrowContainer">
          <div className='arrowRight' onClick={this.props.forward}>{arrowForward}</div>
          <div className='arrowLeft' onClick={(e) => this.toggleBack(e)}>{arrowBack}</div>

const arrowBack = <FontAwesomeIcon icon="angle-left" size='3x' style={{ color: 'dimgrey'}} />
const arrowForward = <FontAwesomeIcon icon="angle-right" size='3x' style={{ color: 'dimgrey', left: '90%'}} />

let members = [
  'sam', 'jamie'

let memberIndex = 0;

export default MeetTheTeam;

Your code looks good to be so far. Can you share a demo of your app via codesandbox?

Thanks for responding. Yeah I’ll put something together this afternoon and post it. Maybe it has something to do with the css. I’m not sure.

I found the issue it was a css issue. Thanks for responing.