React native refresh component

Question

I have my component that successfully render another component in this way:

const List = require('../List.js');

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.registerListner();
    }
    render() {
        console.log("MyComponent render");
        return (
            <List/>
        );
    }
    registerListener() {
        const emitter = new NativeEventEmitter(MyModule);
        emitter.addListener('onListChange',
            (element) => {
                this.setState({ elements: elements });
                console.log("receive elements: ", elements);
            }
        );
    }
}

module.exports = MyComponent;

Now, how can I render again the list "passing" new elements?

Answer 1

When updating the state by setState, react automatically calls render() method again. So all you need to do is:

render() {
    const {elements} = this.state;
    return (
        <List
            items={elements}
        />
    );
}

If the List component has different property name for getting list items, replace items with that name.