CODEWITHSUNDEEP
reactjs
domnministru
domnministru

Reputation: 35

Share state between siblings in ReactJS(state not in parent)

I have 3 components: Parent, Child1 and Child2. All the state is handled in Child 2 and cannot be moved to Parent(to much work at the moment). I need to change the state by onClick from Child1.

It's about a component of a big app that's gonna be rebuild soon, but no time for that at the moment.

State of Child2:

state = {
        selected: 0,
        type: '',
        showRootLayer: true,
        filters: {
            amount: { default: true, defaultText: 'Tutti', defaultValue: { start: 0, end: 100 }, text: '', value: '' },
            date: {
                default: true,
                defaultText: 'Week',
                defaultValue: { start: moment().subtract(1, 'week'), end: moment().subtract(1, 'day') },
                text: '',
                value: ''
            },
        }
    };

By clicking on button on Child1 I need my text field of date filter from state to become 'Day':

state = {
        selected: 0,
        type: '',
        showRootLayer: true,
        filters: {
            amount: { default: true, defaultText: 'Tutti', defaultValue: { start: 0, end: 100 }, text: '', value: '' },
            date: {
                default: true,
                defaultText: 'Week',
                defaultValue: { start: moment().subtract(1, 'week'), end: moment().subtract(1, 'day') },
     >>>>>>>    text: 'Day',
                value: ''
            },
        }
    };

Upvotes: 1

Views: 119

Answers (1)

Dupocas
Dupocas

Reputation: 21357

React is all about data flowing down the component's tree. So horizontal communication is anti-pattern and hard to achieve. If you can't lift your state up consider using redux to centralize your state. There is Context API but I'm guessing won't be helpful to you cause it also involves moving the state to a Provider.

Upvotes: 2

Related Questions