Call a method pass from parent component to child component in React

Question

I have a parent stateful react component that has a function that will change when an html span is clicked within the child component. I want to pass that method to the child component and call it when the snap is clicked I then want to pass it back up to the parent component and updated the state based on what is passed back up. I am having trouble passing down the method and calling it within the child component...

parent component:

export default class App extends Component {
    constructor(props) {
        super(props)

        this.state = {
            dates: [],
            workouts: [],
            selectedDate: '',
            selectedWorkouts: []
        }

        this.updateDateAndWorkouts = this.updateDateAndWorkouts.bind(this)
        axios.defaults.baseURL = "http://localhost:3001"
    }

    updateDateAndWorkouts = () => {
        console.log('clicked')
    }

    render() {
        return (
            <div>
                <DateBar data={this.state.dates}/>
                <ClassList workouts={this.state.selectedWorkouts} updateDate={this.updateDateAndWorkouts}/>
            </div>
        )
    }

This is the child component:

export default function Datebar(props) {
    return (
        <div>
            {props.data.map((day, index) => {
                return (
                    <div key={index}>
                        <span onClick={props.updateDate}>
                            {day}
                        </span>
                    </div>
                )
            })}
        </div>
    )
}

What I want to happen is when the method is called in thechild component, it calls the method that was passed and pass the text within the span div...

You're not passing any function here: <DateBar data={this.state.dates}/> — Colin Ricardo
What specifically isn't working? You don't pass a function to Datebar, you do pass one to ClassList. Also, you don't need to bind arrow functions manually--that's one of the points of arrow functions. — Dave Newton
<DateBar data={this.state.dates} updateDate={this.updateDateAndWorkouts}/> — Taki

Unknown Unknown · Accepted Answer · 2019-08-23T20:24:46

You have to actually pass function to child component

export default class App extends Component {
    constructor(props) {
        super(props)

        this.state = {
            dates: [],
            workouts: [],
            selectedDate: '',
            selectedWorkouts: []
        }

        this.updateDateAndWorkouts = this.updateDateAndWorkouts.bind(this)
        axios.defaults.baseURL = "http://localhost:3001"
    }

    updateDateAndWorkouts = () => {
        console.log('clicked')
    }

    render() {
        return (
            <div>
                <DateBar data={this.state.dates} updateDate={this.updateDateAndWorkouts} />
                <ClassList workouts={this.state.selectedWorkouts} updateDate={this.updateDateAndWorkouts}/>
            </div>
        )
    }

Call a method pass from parent component to child component in React

2 Answers