title: How should I pass static data into a React component?
body: <p>I’m working on taking several pieces of an existing site and making them bundled components with Webpack and React. The existing site doesn’t use any kind of an API and outputs most of its markup with PHP.</p>
  
  <p>My first project is to take a form that’s used in several places on the site and move it into a React component. This form is sometimes pre-populated with data from the database, and I'm not sure of the cleanest way to get that data into the React component.</p>
  
  <p>Previously the form was just output with PHP and several <code>&lt;?php echo $FormFieldValue ?&gt;</code> blocks. I need to get that PHP data into the React component.</p>
  
  <p>Currently I'm doing it this way:</p>
  
  <p><strong>In the PHP I’m creating an array that represents what I might get from an API:</strong></p>
  
  <pre><code>&lt;?php
      $formData = array(
          'FirstName' =&gt; $theUser-&gt;FirstName,
          'LastName' =&gt; $theUser-&gt;LastName,
          'EmailAddress' =&gt; $theUser-&gt;EmailAddress,
          'Company' =&gt; $theUser-&gt;Company
      );
  ?&gt;
  </code></pre>
  
  <p><strong>Then I convert that to JSON in a data- attribute on the $el the React component is injected into:</strong></p>
  
  <pre><code>&lt;div data-props='&lt;?php echo json_encode($billingInfoFormData) ?&gt;'&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>My component:</strong></p>
  
  <pre><code>var BillingInfo = React.createClass({
  
      getInitialState() {
          return this.props.dataProps
      },
      render() { … }
  })
  </code></pre>
  
  <p><strong>And finally, to render it:</strong></p>
  
  <pre><code>var $domEl = $('[data-billing-info-form]')
  var BillingInfoForm = require('./components/Forms/BillingInfo.jsx')
  var BillingInfoFormDom = React.render(
      &lt;BillingInfoForm
          dataProps = {$domEl.data('props')}
          formTitle = 'Billing Info' /&gt;,
      $domEl.get(0)
  )
  </code></pre>
  
  <p>Now here's the thing. I know populating state with props is considered a no-no. So I'm here, turning to Stack Overflow to see what my options are.</p>
  
  <p>Suggestions??</p>