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

JavaScript
1

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: !this.state.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'}/>
          <ContactInfo/>
          <Menu visible={this.state.menu?'fadeIn':'fadeOut'}/>
          <Testimonial/>
          <MeetTheTeam forward={this.forward}/>
        </div>
      </div>
    );
  }
}

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>
        <div id="arrowContainer">
          <div className='arrowRight' onClick={this.props.forward}>{arrowForward}</div>
          <div className='arrowLeft' onClick={(e) => this.toggleBack(e)}>{arrowBack}</div>
        </div>
      </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;
2

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

3

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.

4

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