reactjs


React material-ui Stepper orientation Uncaught TypeError: Cannot read property 'props' of null


My Stepper component should render in a vertical or horizontal layout depending on screen size. For that reason I'm using a prop "verticalLayout". If I render it in vertical mode (verticalLayout = {true}) everything seems to be working just fine. As soon as I render in horizontal mode (verticalLayout = {false}) it stops working with the Uncaught TypeError: Cannot read property 'props' of null
My search didn't yield any answers and I tried everything I could think of (replacing this with a let variable, refactoring the code to check if this && this.props ... etc.) but only deleting all the references to in the vertical Layout gets rid of the error. I'm at a loss and would greatly appreciate your help. Here is my code:
import React, {Component} from 'react';
import {
Step,
Stepper,
StepLabel,
StepContent,
} from 'material-ui/Stepper';
export default class MyReactiveStepperComponent extends Component {
render() {
console.info(this.props.verticalLayout)
return (
<div>
<Stepper activeStep={this.props.activeStep} orientation={this.props.verticalLayout ? "vertical" : "horizontal"}>
<Step>
<StepLabel>Step 1</StepLabel>
{ console.warn(this.props) && this.props.verticalLayout &&
<StepContent>
{this.props.children}
</StepContent>
}
</Step>
<Step>
<StepLabel>Step 2</StepLabel>
{ this.props.verticalLayout &&
<StepContent>
{this.props.children}
</StepContent>
}
</Step>
<Step>
<StepLabel>Step 3</StepLabel>
{ this.props.verticalLayout &&
<StepContent>
{this.props.children}
</StepContent>
}
</Step>
<Step>
<StepLabel>Step 4</StepLabel>
{ this.props.verticalLayout &&
<StepContent>
{this.props.children}
</StepContent>
}
</Step>
</Stepper>
{ !this.props.verticalLayout && <div> { this.props.children } </div> }
</div>
);
}
}
There seems to be an issue with the following :
{ this.props.verticalLayout &&
<StepContent>
{this.props.children}
</StepContent>
}
I am not a JavaScript expert but I think that 'this' is not correctly bound to your MyReactiveStepperComponent.
You can work this around by using the ES6 arrow function syntax :
{
() => this.props.verticalLayout && (
<StepContent>
{this.props.children}
</StepContent>
)
}
Or binding the calls to this, which is not recommanded.

Related Links

Why is “flex”-Property not working any more in react-native?
Unexpected token with Webpack and React
when use redux, can I call api in container component?
Avoid navigation in react.js on button click
React Native 0.43 upgrade: react#16.0.0-alpha.6 does not satisfy its siblings
Synchronous callback for require.ensure in Webpack 2
Test a create-react-app index.js file
Redirect after submit success redux-form
redux-promise: Uncaught TypeError: middleware is not a function
Have child of react component know the height of other child within the component
React Redux - Is there a way to wait until redux dispatch actions are finished via a promise?
Redux, store same value more than once
ImmutableJS Map, how to iterate over a map and return a modified result
How to get filtered object length
Updating Redux with Sqlite3 in an Electron application
Redux - how to call an action creator from inside another action creator?

Categories

HOME
teradata
ide
salesforce
service
snappy
glsl
singleton
sms
flowtype
vsixmanifest
spring-data-solr
digital
decoding
jetbrains
oxid
box2d
infopath
appsettings
greensock
multibinding
pylint
dev-c++
prepros
waterfall
adobe-captivate
resx
checkmarx
jms-topic
directions
availability
extern
pygraphviz
area
nscollectionview
azure-web-roles
inner-join
niagara-ax
angular-fullstack
spring-webflow-2
serialversionuid
ear
e4
fluent-nhibernate-mapping
typewriter
scikit-image
jspx
kik
aws-kms
web-optimization
instabug
askbot
personality-insights
cyberduck
xml-simple
litedb
pdcurses
mergecursor
jad
dockerpy
uiblureffect
clearcanvas
gnip
parallel-port
disabled-control
nspopupbutton
isl
hotlinking
satisfiability
nodeunit
autofilter
xcode6.1-gm-seed
jfilechooser
kademlia
nx
cron4j
quit
junit-rule
custom-cursor
filedialog
systrace
stl-algorithm
nbehave
quazip
marathontesting
excellibrary
conditional-operator
google-local-search
chromebug
large-data-volumes
dgml
focus-stealing
scala-designer
unauthorized
asp.net-1.1
memory-consumption

Resources

Encrypt Message