How to get data from React root component?

Question

here is my code:

var Form = React.createFactory(require('../views/Form'));

React.render(
    Form({
        mainData: data
    }),
    document.getElementById('main_form')
);

The data is transmitted in 'form' component, how to get changed data (mainData) to external app? Any idea how to do so?

Thanks!

You need to accept a function as a property on your Form component. Then from inside the form component, you can call that function whenever the data changes. This function will be passed in from the Root component, so you can handle the change however you like. — Nick Coad, Sep 22 '15 at 05:22

score 4 · Accepted Answer · answered Sep 22 '15 at 05:22

You should pass in an event handler to the form, and have the form call this handler whenever the data has changed.

var Form = React.createFactory(require('../views/Form'));

React.render(
    Form({
        mainData: data,
        onChange: function(newData) {
            // Do stuff with the newly changed data here
        }
    }),
    document.getElementById('main_form')
);

Then in the form component definition, take in the onChange attribute as a prop.

var Form = React.createClass({
    getInitialProps: function() {
        mainData: [],
        onChange: null
    },

    // Call this.props.onChange whenever data is changed
});

J3Y, thanks for answer! It saved me time) – Arman Mukatov Sep 22 '15 at 05:30 — Arman Mukatov, Sep 22 '15 at 05:30

How to get data from React root component?

1 Answers1