How to pass state to LinearStepper in reactjs?

Question

This is my constructor where my variable is, all i want is to pass this variable in HorizontalLinearStepper...

export class Dashboard extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      area: null,
    };
  }

I succesfyllu get the value and set it to this.state.area

 var Area = L.GeometryUtil.geodesicArea(layer.getLatLngs()[0]);
        var area1 = L.GeometryUtil.formattedNumber(Area * 0.001) + "  m²";
        console.log(area1);
        this.setState({
          area: area1,
        });

This is how on step 1 i give my component Dashboard

case 1:
        return (
          <div style={{ padding: "2% 0" }}>
            <Typography variant="h4">Find your land on the map</Typography>
            <AlertNoPoly errorStatusPolly={errorStatusPolly} />
            <ul>
              <li>
                Find your land on the map and mark it using the map tools.
              </li>
              <li>Or upload a digital file of your land</li>
            </ul>
            <Dashboard viewMap={viewMap}  area={area} />
          </div>
        );

Now my problems is that from the stepper to Dashboard no problems to pass a variable with its value but how to make from Dashboard to stepper to pass variable?

So the question is how to pass value from child component to parent or what? — Dmitry Reutov, Jun 02 '20 at 10:36
yes...i have problems with passig this.state.area to horizontalStepper-a — Liverpool, Jun 02 '20 at 10:56
there is no HorizontalStepper code is provided so it is not clear which problems you have, which kind of value ypou want to provided and why — Dmitry Reutov, Jun 02 '20 at 10:58
https://github.com/SoilViews/SoilViews/blob/master/src/components/Wizard/HorizontalLinearStepper.js --> this is mu stepper component — Liverpool, Jun 02 '20 at 11:10
https://github.com/SoilViews/SoilViews/blob/master/src/components/dashboard/Dashboard.js --> this is my Dashboard component — Liverpool, Jun 02 '20 at 11:11
cool, but i can't see where are you using Dashboard component inside Stepper, it is just imported and never used. But it doesnt matter actually, just tell me please what kind of value you want to pass to parent? Normally it is passed by handler which is passing to child — Dmitry Reutov, Jun 02 '20 at 11:14

score -1 · Answer 1 · answered Jun 02 '20 at 11:18

If i understood your question correctly - here is an example of passing value from parent to child

const Stepper = props => {
  const childValueHandler = (childValue) => {
    // do what you want with childValue
  }

  return <Dashboard childValueHandler={childValueHandler} />
}

so inside Dashboard you just call props.childValueHandler passing value as argument

How to pass state to LinearStepper in reactjs?

1 Answers1