Using state in method - React - reactjs

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 ?

Answer 1

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.

Answer 2

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.