React Native - Passing data from a component to another

Question

I took over a React Native project from somebody else, this project is quite old (2 years) and I came across the following:

Home.js Component: (I simplified it)

export let customersData = null;

export default class Home extends Component {  

    render() {
        return (
            <JumboButton
                onPress={() => {
                  this.props.navigator.push({
                    component: CustomerSearch
                  });
                }}
              >
        );
    }

    _getAllCustomers(limit, sortAttr, order) {
        apiCall.(apiUrl, {
        ...
        }).then((responseData) => {
            const customersDataAll = responseData.data;
            customersData = customersDataAll.filter((f) => {
                return f.lastname !== ''
            });
        });
    }
}

So within the Home-Component, customersData is filled with data. Also the component CustomerSearch is called and within CustomerSearch I found this:

CustomerSearch.js:

import {customersData} from './Home';

export default class CustomerSearch extends Component {
    constructor(props) {
        super(props);
        this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSource: this.ds.cloneWithRows(customersData),
        };
    }
}

Two things are a bit weird for me:

Is it correct to set customersData and not this.customersData inside the callback of the api call?
Currently I get this error https://d.pr/i/IUzxdf "Cannot convert undefined or null to object" and I assume that this is because of the data import of customersData in CustomerSearch.js. Is the place where I need to look? Btw is there any chance that react tells me the exact line and file where this error occurs?

Thanks for your help!

1. No. It is not defined in the class. It is just a variable out of your component. 2. How do you render CustomerSearch component? Also, I don' get it why don't you set a state in Home component populate the data there and render CustomerSearch component in Home, then pass the data as a prop? How does CustomerSearch component knows when the data updated if you import it like that? — devserkan
– devserkan, Commented Aug 24, 2018 at 15:02
The error is obvious? You're exporting & importing a null variable and cloneWithRows expect a blob of data. facebook.github.io/react-native/docs/… — slashsharp
– slashsharp, Commented Aug 24, 2018 at 15:18

fredmoon · Accepted Answer · 2018-08-24 15:26:09Z

Short answer is that it is definitely an unusual React pattern, and not one that many people would recommend. Importing a let variable into another file is not a reliable way to share information between components.

It would be far more sensible to attach customersData to your parent component's state and pass it to CustomersSearch through a prop - i.e.

export default class Home extends Component {
  constructor (props) {
     super(props);
     this.state = { customersData: null };
     this._getAllCustomers = this._getAllCustomers.bind(this)
  }

  render() {
    return (
        <JumboButton
          onPress={() => {
            this.props.navigator.push({
              component: props =>
                <CustomerSearch customersData={this.state.customersData} {...props} />
            });
          }}
        >
    );
  }

  _getAllCustomers(limit, sortAttr, order) {
    apiCall.(apiUrl, {
    ...
    }).then((responseData) => {
        const customersDataAll = responseData.data;
        const customersData = customersDataAll.filter((f) => {
            return f.lastname !== ''
        });
        this.setState({ customersData });
    });
  }
}

Not sure how your JumboButton's onPress prop works exactly, but you should get the idea?

And in answer to 2. - Yes I would imagine this is the problem!

Collectives™ on Stack Overflow

React Native - Passing data from a component to another

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related