title: React TypeError: Cannot destructure property as it is undefined
body: <p>Any problem with this code?</p>
  <pre><code>class App extends React.Component {
    constructor(props) {
      super(props);
      this.state ={
        name: '',
        gender: '',
        age: '',
      };
    }
  
    componentWillMount() {
      const { steps } = this.props;
      const { name, gender, age } =steps;
      this.setState({ name, gender,age });
  
    }
  </code></pre>
  <br />
  <p>the error shows like this :</p>
  <p><a href="https://i.stack.imgur.com/ADe9X.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ADe9X.png" alt="enter image description here" /></a></p>
  <p><strong>isn't it defined in the <code>this.state</code>  block right above?</strong></p>
  <br />
  <p><strong>Full code here:</strong></p>
  <p>App.js</p>
  <pre><code>export default class App extends Component {
    constructor(props) {
      super(props);    
      this.state = {
        name: '',
        age: '',
      };
    }
  
    componentWillMount() {
      const { steps } = this.props;
      const { name,age } = steps;
      this.setState({ name, age });
    }
  
   render() {
      const { name, age } = this.state;
     
      return (
        &lt;div&gt;
          &lt;h3&gt;Summary&lt;/h3&gt;
          &lt;table&gt;
            &lt;tbody&gt;
              &lt;tr&gt;
                &lt;td&gt;Name&lt;/td&gt;
                &lt;td&gt;{name.value}&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;Age&lt;/td&gt;
                &lt;td&gt;{age.value}&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  <p>SimpleForm.js</p>
  <pre><code>const steps = [
        {
          id: '1',
          message: 'What is your name?',
          trigger: 'name',
        },
        {
          id: 'name',
          user: true,
          trigger: '5',
        },
        {
          id: '5',
          message: 'How old are you?',
          trigger: 'age',
        },
        {
          id: 'age',
          user: true,
          trigger: '7',
        },
        {
          id: '7',
          message: 'Great! Check out your summary',
          trigger: 'review',
        },
        {
          id: 'review',
          component: &lt;App /&gt;,
          asMessage: true,
          end: true,
        }
      ]
  
  
  class simpleForm extends React.Component {
      render() {
          return (
              &lt;ChatBot steps={steps} /&gt;
          )
       }
  }
  
  export default simpleForm;
  </code></pre>