ReactJS calling functions from child component

Question

I have a father component and I import 3 child components in it. All I want is to execute a function and change the "isToggleOn" variable.

import React, { Component } from 'react'

import Child1 from './Child1'
import Child2 from './Child2'
import Child3 from './Child3'

export default class Father extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isToggleOn: false,
            isLoggedIn: null
        };
        this.FiWantToCall = this.FiWantToCall.bind(this);
    }

    FiWantToCall = () => {
        this.setState(prevState => ({
            isToggleOn: !prevState.isToggleOn
        }));
    }

    render() {
        return (
            <div className="a-class">
                <Child1 />
                <div>
                    {this.state.isLoggedIn ? (
                        <Child2 />
                    ) : (
                        <Child3 />
                   )}
                </div>
            </div>
        );
    }
}

And in every Child component let's say I have a:

<button onClick={this.FiWantToCall}>Button</button>

I don't know if calling this.FiWantToCall is right but I wrote it just to explain what I want. Is it possible to call a function from Child written in Father?

yes, it has to be passed in to the child thru props, and then you can use a lifecycle method or an event to call it — Eric Hasselbring, Feb 23 '18 at 14:23
@EricHasselbring Oh i never thought about that. Thank you very much !! — iNemesis, Feb 23 '18 at 14:25

ReactJS calling functions from child component

0 Answers0