0

I try to use the mobile-stepper component (https://material-ui.com/demos/steppers/#mobile-stepper-progress) in Hyperstack but I get this error:

Failed prop type: Invalid prop `nextButton` supplied to `MobileStepper`, expected a ReactNode. in MobileStepper

It renders just the progress bar but no buttons.

Tried various ways i.e.:

Mui.MobileStepper( variant: "progress", steps: 6, position: "static",
                   nextButton: lambda { Mui.Button(size: "small") {'next'} },
                   backButton: lambda { Mui.Button(size: "small") {'back'} })
chiwowahh
  • 25
  • 4

1 Answers1

3

You want to pass a full ReactNode to the nextButton and backButton props. You also need to convert the component to native javascript. You can call to_n on any Hyperstack component to convert it to a native react class.

Mui.MobileStepper( variant: "progress", steps: 6, position: "static",
                   nextButton: Mui.Button(size: "small") {'next'}.to_n,
                   backButton: Mui.Button(size: "small") {'back'}.to_n)
Cereal
  • 3,699
  • 2
  • 23
  • 36
  • Thanks a lot, this does seem to work but I have one issue: it somehow render 2 addition "next", "back" buttons on top of the component, can't figure out why – chiwowahh Apr 22 '19 at 10:16
  • @chiwowahh I think its because you need to add `.as_node` so that the component does not render - `Mui.Button(size: "small") {'back'}.as_node.to_n)` – BarrieH Apr 27 '19 at 13:48