React TypeError: Cannot destructure property as it is undefined

Question

Any problem with this 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 });

  }

the error shows like this :

isn't it defined in the this.state block right above?

Full code here:

App.js

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 (
      <div>
        <h3>Summary</h3>
        <table>
          <tbody>
            <tr>
              <td>Name</td>
              <td>{name.value}</td>
            </tr>
            <tr>
              <td>Age</td>
              <td>{age.value}</td>
            </tr>
          </tbody>
        </table>
      </div>
    );
  }
}

SimpleForm.js

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: <App />,
        asMessage: true,
        end: true,
      }
    ]


class simpleForm extends React.Component {
    render() {
        return (
            <ChatBot steps={steps} />
        )
     }
}

export default simpleForm;

Blowzed

What is defined in your component's props? Or to be precise, how does this.props.steps look like? – Calfskin

@Calfskin it is primary chatbot steps, i want to catch user inputs ((name, gender, age)) into chatbot dialog, and render them onto the screen. The chatbot component refers from here (lucasbassetti.com.br/react-simple-chatbot/#/docs/hello-world). am i answer your questions? – Blowzed

Answer 1

The error is clear. You're not sending any props to the App component, so { steps } is undefined, and you can't destructure the property "steps" because it's undefined.

Embrocate

Answer 2

componentWillMount is now a deprecated life cycle method and will be removed in version 17. React Documentation.

One option is defining defaults into the state from props. e.g.

this.state = {
  name: this.props.steps.name || '',
  gender: this.props.steps.gender || '',
  age: this.props.steps.age || ''
}

You could also set it to state after componentDidMount.

Markhor

works when i change into new state, but the under render() { const { name, gender, age } = this.state; return ( {name.value} ) } not show up anything? – Blowzed

Do you have a full example of the code? It can be hard to see what is going on with snippets here and there. – Markhor

Sure will add on the original post :D – Blowzed

Answer 3

It is a Chrome error and not your React application.

I am getting the same error for the Angular application.

Esmeraldaesmerelda