CODEWITHSUNDEEP
javascriptreactjs
Omar Jandali
Omar Jandali

Reputation: 824

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

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...

Upvotes: 0

Views: 163

Answers (2)

kam773
kam773

Reputation: 83

You have to call that method in child component 

props.updateDate()

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

Upvotes: 0

user9242543
user9242543

Reputation:

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

Upvotes: 3

Related Questions