title: Why is my component not effectively receiving props?
body: <p>I keep getting a message that the item I'm trying to access via props is undefined. Can you please tell me why it's not working?</p>
  
  <p>Here is where the instance where the props are attempting to be passed... I'm specifically talking about the tellus and yourTrial props.</p>
  
  <pre><code>import React from 'react'
  import Info from './components/Info'
  import Upsell from '../../../general/components/order/components/Upsell'
  import FormTwo from '../../../general/components/forms/FormTwo'
  import Footer from '../../../cbd-desktop/components/layout/Footer'
  
  
  export default class Order extends React.Component {
    render() {
      return (
       &lt;div&gt;
        &lt;div&gt;
      &lt;div style={styles.header}&gt;
        &lt;img style={styles.leaf} src="./resources/desktop-img/leaves_top.png" /&gt;
        &lt;img style={styles.logo} src="./resources/desktop-img/logo_white.png" /&gt;
      &lt;/div&gt;
      &lt;div style={styles.wrapper}&gt;
        &lt;div style={styles.leftWrapper}&gt;
          &lt;Info /&gt;
          &lt;Upsell styles={upsellStyles} /&gt;
        &lt;/div&gt;
          &lt;FormTwo styles={formStyles} tellus="Tell us where to send" yourTrial="YOUR TRIAL BOTTLE"} /&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;Footer style={styles.footer}/&gt;
  &lt;/div&gt;
  )
   }
  }
  </code></pre>
  
  <p>And here is where I am trying to display these values on the child... towards the top in two h2s</p>
  
  <pre><code>import React from 'react'
  import { connect } from 'react-redux'
  import { stepTwoSubmit, saveBillingData } from 
  '../../actions/formStepTwoActions'
  import { addReceiptProduct } from '../../actions/receiptActions'
  import FormTwoInputs from './components/FormTwoInputsComponent.jsx'
  import Throbber from '../throbber/Throbber'
  import FormWarning from './components/FormWarningComponent.jsx'
  import Button from '../../../cbd-desktop/components/layout/Button'
  
  const mapStateToProps = state =&gt; ({
    state:state,
    config:state.config,
    downsellProduct:state.downsell.downsellProduct || {},
    receiptProducts:state.receipt.receiptProducts || []
  })
  const mapDispatchToProps = {
    stepTwoSubmit,
    saveBillingData,
    addReceiptProduct
  }
  
  @connect(mapStateToProps, mapDispatchToProps)
  export default class FormTwo extends React.Component {
    constructor(props) {
      super(props)
  
  
    componentWillReceiveProps(nextProps) {
      let formTwoResponse = nextProps.state.stepTwo.formTwoResponse
  
      this.checkOrderStatus(formTwoResponse)
    }
    componentDidMount() {
      this.fillMainOrder()
      this.calculateViewers()
      this.calculateTimer()
    }
  
  
    render() {
      let { state, props, inputs, onInputFocus, saveInputVal, styles } = this,
           CustomTag = props.labels ? 'label' : 'span',
          { submitting, formWarning } = state,
          { invalidInputID, text, visible } = formWarning
  
  
       return (
        &lt;div style={styles.formWrapper}&gt;
          &lt;p style={styles.yellowBanner}&gt;{this.state.viewers} people viewing this product right now&lt;/p&gt;
            &lt;div style={styles.formInnerWrapper}&gt;
              &lt;div style={styles.headerWrapper}&gt;
                &lt;h2 style={styles.header}&gt;{this.props.tellus}&lt;/h2&gt;
                &lt;h2 style={styles.header}&gt;{this.props.yourTrial}&lt;/h2&gt;
             &lt;/div&gt;
              &lt;div style={styles.weAccept}&gt;
                &lt;p style={styles.weAcceptText}&gt;We Accept:&lt;/p&gt;
                 &lt;img style ={styles.cardImage} src="resources/desktop-img/cards.png" /&gt;
              &lt;/div&gt;
              &lt;form onSubmit={this.submit}&gt;
                &lt;FormTwoInputs onInputFocus={onInputFocus} saveInputVal={saveInputVal} CustomTag={CustomTag} styles={styles} /&gt;
  
                &lt;FormWarning visible={visible} invalidInputID={invalidInputID} text={text} /&gt;
                &lt;Button style={styles.button} buttonText="RUSH MY TRIAL" /&gt;
              &lt;/form&gt;
            &lt;/div&gt;
             &lt;img src="resources/desktop-img/secure.png" /&gt;
              &lt;div style={styles.urgencyWrapper}&gt;
                &lt;div style={styles.urgencyTextWrapper}&gt;
                  &lt;span style={styles.redText}&gt;{this.state.viewers} people are viewing this offer right now -&lt;/span&gt;
                  &lt;span style={styles.blueText}&gt;{this.state.counter}&lt;/span&gt;
                &lt;/div&gt;
                &lt;p style={styles.blueText}&gt;Claim Your Bottle Now&lt;/p&gt;
             &lt;/div&gt;
          &lt;Throbber throbberText='Confirming your shipment...' showThrobber={submitting} /&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>