React help with passing props

JavaScript
1

I’m new to React and I’m having trouble passing props to other classes.

Here is what I’m working with:
A Navigation with a switchstatement to change the current rendered page

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()

2

Can you give us a little more information on the errors? What’s doing something unexpected.

Remember the state is asynchronous, by the way.

3

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()

4

Try with

nextStep = () => {
        this.setState({
            step : this.state.step + 1
        })
    }

Or binding this in the constructor.

5

I figured it out. The problem is in the:

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

                <Footer nextStep={this.props.nextStep}
                        previousStep={this.props.previousStep} />
            </React.Fragment>
            )
    }

But Thanks!

6

Ah, yes! Of course! D’oh! :smiley:

7

Got the answer from Stackoverflow. But do you have tips on debugging for future bugs?

8

I use the React dev tools on Firefox. Also available for Chrome. I find it useful :slight_smile:

9