React context: consumer do not trigger handlers from provider

Question

I have the following situation: A provider that provides a state for my components: ChildProvider and a lot of consumers: ChildrenComponent, ChildrenListComponent etc. In the provider I set handlers to deal with add, edit and delete items on list, also I set handlers dealing with show or hide component and a children list per si. I can see the list provided by provider exactly as expected but the handlers does not work. For example, at childrenlist component I sent handler to show AddChildComponent according to button click within TitleComponent, but I can't see ChildrenAddComponent rendering and I don't know why. What am I missing here? Any other handlers it is working as well :(

MilesContext

import React from 'react';

const MilesContext = React.createContext();

export default MilesContext;

ChildrenProvider

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

export default class ChildProvider extends Component {

    state = {
        child: {
            childList : [{
                id: 1,
                name: "Sheldon Lee Cooper",
                birthDate: "01-25-2014",
                gender: "male"

            },
            {
                id: 2,
                name: "Amy Farah Fowler",
                birthDate: "06-25-2017",
                gender: "female"
            }],
            showComp : false,
            handleShow : this.handleShowComponent,
            handleHide : this.handleHideComponent,
            handAddChildren : this.handleAddChildrenToList,
            handleEditChildren : this.handleEditChildrenFromList,
            handleDeleteChildren: this.handleDeleteChildrenFromList
        }
    }

    handleShowComponent = () => {
        console.log("eliete")
        this.setState({ showComp : true})
    }
    handleHideComponent = () => this.setState({ showComp : false})
    handleAddChildrenToList = (child) => {
        child.id = this.state.child.childList.length + 1
        this.setState({
            childList: [...this.state.child.childList, child]
        })
    }
    handleEditChildrenFromList = (editedChild) => {
        const editedList = this.state.child.childList.map(child => (child.id === editedChild.id ? editedChild : child))
        this.setState({childList: editedList})
    }
    handleDeleteChildrenFromList = (deletedChild) => {
        const editedList = this.state.child.childList.filter(child => child.id !== deletedChild.id)
        this.setState({childList: editedList})
    }

    render() {
        return (
            <MilesContext.Provider
                value={{
                    child: this.state.child,
                    handleShowComponent : this.state.child.handleShow,
                    handleHideComponent : this.state.child.handleHide,
                    handleAddChildrenToList : this.state.child.handAddChildren,
                    handleEditChildrenFromList : this.state.child.handleEditChildren,
                    handleDeleteChildrenFromList: this.state.child.handleDeleteChildren
                }}>
                {this.props.children}
            </MilesContext.Provider>
        );
    }

}

ChildrenComponent

import React from 'react';
import MilesContext  from '../../context/MilesContext';
import ChildrenList from './ChildrenListComponent';
import ChildrenAddComponent from './ChildrenAddComponent';

const Children = () => (
    <MilesContext.Consumer>
        {(value) => (
            <>
                <ChildrenList />
                { value.child.showComp ?
                    <ChildrenAddComponent/>
                    :
                    null
                }
            </>
        )}
    </MilesContext.Consumer>
)

export default Children;

ChildrenComponent

import React from 'react';
import MilesContext  from '../../context/MilesContext';
import ChildrenItem from './ChildrenItem';
import TitleComponent from '../TitleComponent';

const ChildrenList = (props) => (
    <MilesContext.Consumer>
        {value => (
            <div className="container-wrapper">
                <div className="row">
                    <TitleComponent 
                        title={ "Children" } 
                        icon={ "fa fa-plus-circle fa-2x justify-content-center mx-auto top-right" }
                        showComponent={ value.child.handleShowComponent } 
                    />
                </div>
                <div className="row justify-content-center">
                    { value.child.childList.length === 0 ?
                        <div className="col-sm-3">
                            <div className="card bg-warning text-center pt-3">
                                <p>No child added!</p>
                            </div>
                        </div>
                        : 
                        <div className="col-sm-6">
                            <ul className="list-unstyled">
                                { value.child.childList.map(child => {
                                    console.log(value.child.handleDeleteChildren)
                                    return (
                                        <li key={ child.id }>
                                            <ChildrenItem
                                                child={ child }
                                                handleEditChildren={ value.child.handleEditChildren }
                                                handleDeleteChildren={ value.child.handleDeleteChildren }
                                            />
                                        </li>
                                    )})
                                }
                            </ul>
                        </div>
                    }
                </div>
            </div>
        )}
    </MilesContext.Consumer>
)

export default ChildrenList;

TitleComponet

import React from 'react';
import MilesContext  from '../context/MilesContext';

export default function TitleComponent(props) {

    return (
        <MilesContext.Consumer>
            { value => (
                <div className="col-sm-12 title-container">
                    <h3><i className="fa fa-user fa-1x mr-3"></i>{props.title}</h3>
                    <i className={props.icon} onClick={() => props.showComponent}></i>
                    <hr/>
                </div>
            )}
        </MilesContext.Consumer>
    );
}

score 0 · Answer 1 · answered Jan 22 '20 at 00:53

Problem comes from "different state level"

handleShowComponent = () => {
    console.log("eliete")
    this.setState({ showComp : true})
}

this operates on this.state.showComp not on this.state.child.showComp you're [probably] expecting here

            { value.child.showComp ?

or here

        <MilesContext.Provider
            value={{
                child: this.state.child,

If you want to update nested object then remember to not mutate existing object (child) but return a new one:

setState( { child: {...this.state.child, showComp: true } })

More about that here

Google for other setState deep object update examples ... or redux related ... the same rules applies (shallow comparison).

React context: consumer do not trigger handlers from provider

1 Answers1