Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot read property 'get' of undefined after upgrade to 4 revisited #148

Open
jeffbonasso-ambifi opened this issue Mar 8, 2022 · 0 comments

Comments

@jeffbonasso-ambifi
Copy link

After upgrading to Version 4 of baobab-react, whenever trying to use this.context.tree for the higher-order component, it gives an error reading property of undefined. This is occurring in a React Native project.

For the simplest example, I used the one you have in the documentation for higher-order components...

index.js

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';

import { root } from 'baobab-react/higher-order';
import state from './state';

import { SafeAreaView, View } from 'react-native';

import List from './List';

// Creating our top-level component
class App extends Component {
    render() {
        return (
            <SafeAreaView>
                <View style={{ margin: 25 }}>
                    <List />
                </View>
            </SafeAreaView>);
    }
}

// Let's bind the component to the tree through the `root` higher-order component
AppRegistry.registerComponent('BaobabTest', () => root(state, App));

List.js

import React, { Component } from 'react';
import { branch } from 'baobab-react/higher-order';
import PropTypes from 'baobab-react/prop-types';

import { Text, View } from 'react-native';

class List extends Component {
    render() {

        // Thanks to the branch, our colors will be passed as props to the component
        const colors = this.props.colors;

        // Show me the colors through context
        console.log("Show me the colors!: ", this.context.tree.get(['colors']));


        function renderItem(color) {
            return <Text key={color}>{color}</Text>;
        }

        return <View>{colors.map(renderItem)}</View>;
    }
}

List.contextTypes = {
    tree: PropTypes.baobab
};

// Branching the component by mapping the desired data to cursors
export default branch({
    colors: ['colors']
}, List);

The following error occurs in the console.log above. When downgrading to baoba-react V3 all works, but it doesn't let us take advantage of the new Hooks!

image

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant