title: My component is trying to access data that doesn't exist yet, "Cannot read property 'data' of undefined"
body: <p>My Component that is trying to mapStateToProps some form data that doesn't exist until the user inputs and submits. The form would take the inputs, store it into redux and then I would be able to take that data and populate a table after an API call </p>
  
  <pre><code>const StepOne = props =&gt; {
    const [formObj, setFormObj] = useState({
      rigName: "",
      desc: "",
      choices: [
        {
          choice: "",
          customAttribute: ""
        }
      ]
    });
  
    return (
      some inputs fields
    );
  };
  const mapStateToProps = state =&gt; {
    return {
      formData: state.stepOneForm.data
    };
  };
  const mapDisptachToProps = disptach =&gt; {
    return {
      addFormIntoRedux: data =&gt; disptach(AddFormData(data))
    };
  };
  export default connect(mapStateToProps, mapDisptachToProps)(StepOne);
  </code></pre>
  
  <p>I've found other posts suggesting I include initial data? or having a check after the render, but I'm not sure what that would look like.
  I believe these options could be the solution, but not sure how to move from here.</p>
  
  <p><a href="https://i.stack.imgur.com/ClIwv.png" rel="nofollow noreferrer">You can see the error here</a></p>