在步进器组件中传递 React Hooks

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() {...}

How can I avoid making it so complicated?

Thank you

Answer 1

I solved my problem by moving the state inside the main component. Then I was easily passing the props from the parent to the child compenent.