Using state in method - React

Question

I've got a method called devCreateSteps and I want to use state in that but it throws an error saying;

Uncaught TypeError: Cannot read property 'isTemplateUsed' of undefined

Here's the snippet of my code;

constructor() {
    super();
    this.state = {
      modalVisible: false,
      tableLoading: false,
      modalHeader: "",
      isTemplateUsed: false
    };
  }

  devCreateSteps = [{
    title: 'Info',
    content: (<StepOne isTemplateUsed={this.state.isTemplateUsed} />),
  }, {
    title: 'Device',
    content: (<StepTwo />),
  }, {
    title: 'Location',
    content: (<StepThree />),
  },
  {
    title: 'Properties',
    content: (<StepFour />),
  },
  {
    title: 'Controls',
    content: (<StepFive />),
  },
  {
    title: 'Summary',
    content: (<StepFinal />),
  }];

The problem is I can't use

isTemplateUsed={this.state.isTemplateUsed}

this in the devCreateSteps

What is the right way to use state to send it as props ?

do you have react console. If yes please tell me what do you have in state for StepOne component — Gardezi
– Gardezi, Commented Sep 13, 2017 at 7:12
It actually throws the error before going to StepOne component. I have a console to see the state in StepOne but it never goes to there. — Burak ULU
– Burak ULU, Commented Sep 13, 2017 at 7:14
But this is my state in StepOne; constructor(props) { super(props); this.state = { isTemplateUsed: this.props.isTemplateUsed }; } — Burak ULU
– Burak ULU, Commented Sep 13, 2017 at 7:15
this will work if state is a class prop also, not done in constructor. — Dimitar Christoff
– Dimitar Christoff, Commented Sep 13, 2017 at 10:36

Shubham Khatri · Accepted Answer · 2017-09-13 08:25:44Z

Instead of defining devCreateSteps as a class property directly in class, do it in the componentWillMount function.

class App extends React.Component {

constructor() {
    super();
    this.state = {
      modalVisible: false,
      tableLoading: false,
      modalHeader: "",
      isTemplateUsed: false
    };
  }

  componentWillMount() {
    this.devCreateSteps = [{
    title: 'Info',
    content: (<StepOne isTemplateUsed={this.state.isTemplateUsed} />),
  }, {
    title: 'Device',
    content: (<StepTwo />),
  }, {
    title: 'Location',
    content: (<StepThree />),
  },
  {
    title: 'Properties',
    content: (<StepFour />),
  },
  {
    title: 'Controls',
    content: (<StepFive />),
  },
  {
    title: 'Summary',
    content: (<StepFinal />),
  }];
  }

}

Also define state as a property intializer too.

class App extends React.Component {


    state = {
          modalVisible: false,
          tableLoading: false,
          modalHeader: "",
          isTemplateUsed: false
        };

    devCreateSteps = [{
        title: 'Info',
        content: (<StepOne isTemplateUsed={this.state.isTemplateUsed} />),
      }, {
        title: 'Device',
        content: (<StepTwo />),
      }, {
        title: 'Location',
        content: (<StepThree />),
      },
      {
        title: 'Properties',
        content: (<StepFour />),
      },
      {
        title: 'Controls',
        content: (<StepFive />),
      },
      {
        title: 'Summary',
        content: (<StepFinal />),
      }];


    }

P.S. make sure you have stage-2 added as a preset to babel in you webpack config, since property initializers are not part of ES6.

what is difference between these two ? can you please explain bit more ?

Pardeep Jain · Accepted Answer · 2017-09-13 08:27:20Z

0

Uncaught TypeError: Cannot read property 'isTemplateUsed' of undefined

Because you are using state variable named open before initializing , you can avoid this error by two ways either

try to initialize variable with empty array and then assign values using state wihtin constructor.

 devCreateSteps: [];

constructor(props, state) {
super(props, state);
this.state = {
  open: this.props.open
}
console.log(this.props, this.state);
this.devCreateSteps = [{
  title: 'Info',
  content: (<p isTemplateUsed={this.state.open} />)
}]
}

or you can use componentWillMount as suggested in above answer.

answered Sep 13, 2017 at 8:27

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

Collectives™ on Stack Overflow

Using state in method - React

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related