title: Update React State of Child Component based on Parent component AJAX call without defining(knowing) data structure of AJAX data
body: <p>I am unsure if I understand the canonical or a preferred way of architecting the data structure(s) of Parent/Child Components that share data.</p>
  
  <p>?? Why do I have to declare the structure of the data coming from the AJAX call on the initial state and not just rely on it from the returned data itself ??</p>
  
  <p>Original problem - I am trying to substring/slice a string that comes in through Ajax, but if it is not loaded, it will error as undefined, so I am trying to only apply it once it comes in.</p>
  
  <p>Working example: <a href="https://stackblitz.com/edit/react-cm7lbr" rel="nofollow noreferrer">https://stackblitz.com/edit/react-cm7lbr</a></p>
  
  <p>If I do not declare the original state (<code>state.name</code> as <code>''</code> in index.js), I will get <code>Cannot read property 'slice' of undefined</code> because the data has not been loaded yet</p>
  
  <p>Index.js:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { render } from 'react-dom';
  import Parent from './Parent';
  import './style.css';
  import axios from 'axios';
  
  class App extends Component {
    constructor() {
      super();
      this.state = {
        // Why does this have to be declared before it comes in through ajax
        name: '', 
        // list: []
        // otherAttrs: {}
      };
      this.bind()
    }
  
    updateList(args) {
      // Update state with harcoded list of items
      axios.get('https://reqres.in/api/unknown')
      .then(res =&gt; {
        const axData = res.data;
        this.setState({ 'data': axData.data });
        this.setState({ 'name': axData.data[4].name });
      })
      .catch(function (error) {
        console.log(error);
      })
      .then(function () {
        // always executed
      })  
    }
  
    bind() {
      this.updateList = this.updateList.bind(this)
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;button onClick={this.updateList}&gt;Click to complete AJAX Call&lt;/button&gt;
          &lt;Parent data={this.state.data} name={this.state.name}/&gt;
        &lt;/div&gt;
      );
    }
  }
  
  render(&lt;App /&gt;, document.getElementById('root'));
  
  export default App
  </code></pre>
  
  <p>Parent.js :</p>
  
  <pre><code>import React, { Component } from 'react';
  import Childd from './Childd';
  
  class Parent extends React.Component {
    constructor(props){
      super(props);
    }
  
    // Render parent component, pass items list and str 
    // into Childd's props
    render () {
      return (
        &lt;div&gt;
          Parent... &lt;br/&gt;&lt;br/&gt;
          &lt;Childd data={this.props.data} name={this.props.name}/&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default Parent
  </code></pre>
  
  <p>Childd.js:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class Childd extends React.Component {
    // Redundant, but just putting this here
    constructor(props) {
      super(props);
    }
  
    // Render Childd using this.props.str
    // React will handle the component's re-rendering
    // when state of Parent changes
    render () {
      //Tige
      return (
        &lt;div&gt;Childd... &lt;br/&gt;
          dataObj = … 
          &lt;br/&gt;
          Name attr: {this.props.name.slice(0,4).toUpperCase()}
          &lt;/div&gt;     )
      }
  }
  
  export default Childd
  </code></pre>