Stepper having two and more steps causing Warnings : Received false for a non-boolean attribute active (and same for completed) inside internal SVG inside (probably) Step.js
Expected Behavior
Create simple stepper with two and more steps (having just one step causes no warnings), like:
<Stepper activeStep={this.state.stepIndex} connector={<ArrowForwardIcon />} >
<Step key="1">
<StepLabel > bla1</StepLabel>
</Step>
<Step key="2">
<StepLabel > bla1</StepLabel>
</Step>
</Stepper>
Expect to see no issues in console log.
Current Behavior
react-dom.development.js:506 Warning: Received `false` for a non-boolean attribute `active`.
If you want to write it to the DOM, pass a string instead: active="false" or active={value.toString()}.
If you used to conditionally omit it with active={condition && value}, pass active={condition ? value : undefined} instead.
in svg (created by ForwardRef(SvgIcon))
in ForwardRef(SvgIcon) (created by WithStyles(ForwardRef(SvgIcon)))
in WithStyles(ForwardRef(SvgIcon)) (created by ForwardRef)
in ForwardRef
in ForwardRef (created by OperationProgress)
in div (created by ForwardRef(Paper))
in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
in WithStyles(ForwardRef(Paper)) (created by ForwardRef(Stepper))
in ForwardRef(Stepper) (created by WithStyles(ForwardRef(Stepper)))
in WithStyles(ForwardRef(Stepper)) (created by OperationProgress)
in div (created by OperationProgress)
in OperationProgress (created by ConnectFunction)
in ConnectFunction (created by Context.Consumer)
in withRouter(Connect(OperationProgress)) (created by OperationDashboardElement)
in div (created by ForwardRef(DialogContent))
in ForwardRef(DialogContent) (created by WithStyles(ForwardRef(DialogContent)))
in WithStyles(ForwardRef(DialogContent)) (created by OperationDashboardElement)
in div (created by ForwardRef(Paper))
in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
in WithStyles(ForwardRef(Paper)) (created by ForwardRef(Dialog))
in div (created by Transition)
...
Warning: Received `true` for a non-boolean attribute `completed`.
If you want to write it to the DOM, pass a string instead: completed="true" or completed={value.toString()}.
in svg (created by ForwardRef(SvgIcon))
in ForwardRef(SvgIcon) (created by WithStyles(ForwardRef(SvgIcon)))
in WithStyles(ForwardRef(SvgIcon)) (created by ForwardRef)
in ForwardRef
in ForwardRef (created by OperationProgress)
in div (created by ForwardRef(Paper))
in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
in WithStyles(ForwardRef(Paper)) (created by ForwardRef(Stepper))
in ForwardRef(Stepper) (created by WithStyles(ForwardRef(Stepper)))
in WithStyles(ForwardRef(Stepper)) (created by OperationProgress)
in div (created by OperationProgress)
in OperationProgress (created by ConnectFunction)
in ConnectFunction (created by Context.Consumer)
in withRouter(Connect(OperationProgress)) (created by OperationDashboardElement)
in div (created by ForwardRef(DialogContent))
in ForwardRef(DialogContent) (created by WithStyles(ForwardRef(DialogContent)))
in WithStyles(ForwardRef(DialogContent)) (created by OperationDashboardElement)
in div (created by ForwardRef(Paper))
in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
in WithStyles(ForwardRef(Paper)) (created by ForwardRef(Dialog))
in div (created by Transition)
in Transition (created by ForwardRef(Fade))
in ForwardRef(Fade) (created by WithTheme(ForwardRef(Fade)))
in WithTheme(ForwardRef(Fade)) (created by TrapFocus)
in TrapFocus (created by Modal)
in div (created by Modal)
in ForwardRef(Portal) (created by Modal)
in Modal (created by ForwardRef(Modal))
in ForwardRef(Modal) (created by WithTheme(ForwardRef(Modal)))
in WithTheme(ForwardRef(Modal)) (created by ForwardRef(Dialog))
in ForwardRef(Dialog) (created by WithStyles(ForwardRef(Dialog)))
in WithStyles(ForwardRef(Dialog)) (created by OperationDashboardElement)
in div (created by Styled(MuiBox))
in Styled(MuiBox) (created by OperationDashboardElement)
in OperationDashboardElement (created by ConnectFunction)
in ConnectFunction (created by Context.Consumer)
in withRouter(Connect(OperationDashboardElement)) (created by AppMaster)
in div (created by AppMaster)
...
Environment 🌎
| Tech |
Version |
| Material-UI |
v4.0.1 |
| React |
v16.8.6 |
| Browser |
Chrome |
| TypeScript |
v3.4.5 |
Stepper having two and more steps causing Warnings : Received
falsefor a non-boolean attributeactive(and same for completed) inside internal SVG inside (probably) Step.jsExpected Behavior
Create simple stepper with two and more steps (having just one step causes no warnings), like:
Expect to see no issues in console log.
Current Behavior
Environment 🌎