javascript - How should I pass static data into a React component? -

i’m working on taking several pieces of existing site , making them bundled components webpack , react. existing site doesn’t use kind of api , outputs of markup php.

my first project take form that’s used in several places on site , move react component. form pre-populated data database, , i'm not sure of cleanest way data react component.

previously form output php , several <?php echo $formfieldvalue ?> blocks. need php data react component.

currently i'm doing way:

in php i’m creating array represents might api:

<?php     $formdata = array(         'firstname' => $theuser->firstname,         'lastname' => $theuser->lastname,         'emailaddress' => $theuser->emailaddress,         'company' => $theuser->company     ); ?> 

then convert json in data- attribute on $el react component injected into:

<div data-props='<?php echo json_encode($billinginfoformdata) ?>'></div> 

my component:

var billinginfo = react.createclass({      getinitialstate() {         return this.props.dataprops     },     render() { … } }) 

and finally, render it:

var $domel = $('[data-billing-info-form]') var billinginfoform = require('./components/forms/billinginfo.jsx') var billinginfoformdom = react.render(     <billinginfoform         dataprops = {$domel.data('props')}         formtitle = 'billing info' />,     $domel.get(0) ) 

now here's thing. know populating state props considered no-no. i'm here, turning stack overflow see options are.

suggestions??

you seem use calls in react rendering, not idea. use php api calls , let javascript framework superagent ajax request towards restfull services , pass javascript framework called [refluxjs2.

with refluxjs have access cool things "stores" data component can access or define actions event listeners, notify every component there change in data "store"

this indirect solve question passing data between , components.

---

to awnser question, @ code below.

//set default props getdefaultprops() {     return {         dataprops: {}     } },  //access object this.props.dataprops