Passing props / calling functions in React

Question

I’m new to React and I would love some help on passing props / calling functions from other components.

Here is what I’m working with:

A Navigation with a switchstatement to change the current rendered page

import React, { Component } from 'react';
import './navigationStyling.css'

// import pages
import Homepage from '../../pages/Home/home'
import Artist from '../../pages/Artist/artist'
import Facilites from '../../pages/Facilities/facilities'
import Money from '../../pages/Money/money'
import AboutYou from '../../pages/AboutYou/AboutYou'
import Resume from '../../pages/Resume/resume'
import Goodbye from '../../pages/Goodbye/goodbye'

class Navigation extends Component {
    constructor(props){
        super(props)
        this.state = {
            step : 1
        }
    }

    nextStep(){
        this.setState({
            step : this.state.step + 1
        })
    }
    
    previousStep(){
        this.setState({
            step : this.state.step - 1
        })
    }

    render(){
        switch(this.state.step){
            case 1: 
                return <Homepage 
                        nextStep={this.nextStep}
                        previousStep={this.previousStep}
                        />  

            case 2: 
                return <Artist 
                        nextStep={this.nextStep}
                        previousStep={this.previousStep}
                        /> 

            case 3: 
                return <Facilites 
                        nextStep={this.nextStep}
                        previousStep={this.previousStep}
                        /> 

            case 4: 
                return <Money 
                        nextStep={this.nextStep}
                        previousStep={this.previousStep}
                        />

            case 5: 
                return <AboutYou 
                        nextStep={this.nextStep}
                        previousStep={this.previousStep}
                        />

            case 6: 
                return <Resume 
                        nextStep={this.nextStep}
                        previousStep={this.previousStep}
                        />

            case 7: 
                return <Goodbye 
                        nextStep={this.nextStep}
                        previousStep={this.previousStep}
                        />
        }
    }

    // saveValues(field_value, field){
        
    //     field = assign({}, field, field_value)
    //     .bind(this)()
    // }
        
}

export default Navigation;

A Footer which will be represented on each of my pages to call the Navigation.nextStep():

    class Footer extends Component{
    render(){
        return(
            <div>
                <button className="btn -primary pull-right" onClick={this.props.previousStep}>Previous</button>
                <button className="btn -primary pull-right" onClick={this.props.nextStep}>Next</button>
            </div>
        )
    }
}

export default Footer

Example on a page:

    class Homepage extends Component{
    render(){
        return(
            <React.Fragment>
                <h1>Homepage </h1>

                <Footer />
            </React.Fragment>
            )
    }
}

export default Homepage

Nothing happens when I click the button, so I don’t think the state receives any events or is updated. So i’m uncertain on how to pass props or on how to call functions through other classes. In java I would do something like Navigation.nextStep()

Answer 1

You need to pass nextStep and previousStep props to Footer component:

class Homepage extends Component{
    render(){
        return(
            <React.Fragment>
                <h1>Homepage </h1>
                <Footer 
                    nextStep={() => console.log("next step click") }
                    previousStep={() => console.log("previous step click") }
                />
            </React.Fragment>
        );
    }
}

You can avoid this kind of errors by using PropTypes. It allows you to specify the properties (type, required or not...) a component is expecting and it shows warnings/errors when they are not satisfied.