Passing Checkbox state in a stepper component

Question

I'm learning React and I deep dived into hooks as they are elegant, minimize the use of classes, and (at first) looked easy to understand. Using Material-ui's stepper and checkboxes component. I'm trying to export the values of what was selected and display it on the next step of the stepper. Checked: This But it seems too complicated in my case. I'm not sure though if I need to pass the state array as props and pass it when returning the component of the 2 checkboxes or map the array and pass it through function?

const [state, setState] = React.useState({
    checkedA: false,
    checkedB: false,
  });

  const handleChange = (event) => {
    setState({ ...state, [event.target.name]: event.target.checked });
//In my try to export the state I'm passing it to a funcvtion every time a change is made
SelectedBoxes({state})
  };



  return (
    <FormGroup row>
      <FormControlLabel
        control={
          <Checkbox checked={state.checkedA} onChange={handleChange} name="checkedA" />
        }
        label="Secondary"
      />
      <FormControlLabel
        control={
          <Checkbox
            checked={state.checkedB}
            onChange={handleChange}
            name="checkedB"
            color="primary"
          />
        }
        label="Primary"
      />

    </FormGroup>
  );
}

//Here is where the function of Selectedboxes is defined
export function SelectedBoxes(checked) {
  return (
    <div>You selected: {checked}</div>
  );
}

function getSteps() {
  return ['Checkboxes', 'SelectedBoxes'];
}

function getStepContent(step) {
  switch (step) {
    case 0:
      return <Checkboxes />;
    case 1:
      return <SelectedBoxes />;
    default:
      return 'Unknown step';
  }
}

export default function HorizontalLinearStepper() {...}

You can keep the state in the parent component which is rendering both `` and `` — Jagrati, May 01 '20 at 13:52
Could you create this in http://codesandbox.io ? I think what you need to do is create a `parent` then have callbacks passed down to different steps. — MonteCristo, May 01 '20 at 13:53

score 0 · Answer 1 · answered May 01 '20 at 14:00

There is concept in react : Lifting up the state. In your case you can have a parent component which is calling the function getStepContent. Lift the state from checkbox component to the parent component. Pass handleChange function as prop to checkbox like <Checkboxes handleChange={handleChange} />. Then when the step changes, you can pass the checkbox state to <SelectedBoxes checkboxState={checkboxState} />

const [checkboxState, setCheckboxState] = useState({
    checkedA: false,
    checkedB: false,
})

const handleChange = (event) => {
    setCheckboxState({ ...state, [event.target.name]: event.target.checked });
}

function getStepContent(step) {
  switch (step) {
    case 0:
      return <Checkboxes handleChange={handleChange} />;
    case 1:
      return <SelectedBoxes checkboxState={checkboxState} />;
    default:
      return 'Unknown step';
  }
}

i have this in stepper componen...: Cannot read property 'handleChange' of undefined — Liverpool, May 01 '20 at 17:45
I did not understand your issue. Do you have a working demo for this? In my answer I have just defined the approach you can take. Its not the fully working code. — Jagrati, May 01 '20 at 17:47

Passing Checkbox state in a stepper component

1 Answers1