How do I pass the value of Select from Child to Parent Component?

Question

The user can choose the category in which another select will appear depending on what was selected. I create the 2nd component in another .js. I can already view the data but how can I pass the value of my 2nd component to the parent component?

I wanted to pass the value of the select from the size1,js to the demo.js

Link: https://codesandbox.io/s/category-selection-oiu7d

demo.js

import * as React from "react";
import Box from "@mui/material/Box";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
import Size1 from "./size1";

export default function BasicSelect() {
  const [age, setAge] = React.useState("");

  const handleChange = (event) => {
    setAge(event.target.value);
  };

  return (
    <Box sx={{ minWidth: 120 }}>
      selected: {age}
      <br /> <br />
      <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">Category</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age}
          label="Age"
          onChange={handleChange}
        >
          <MenuItem value="S-XL">S-XL</MenuItem>
          <MenuItem value="Size2">Size2</MenuItem>
        </Select>
      </FormControl>
      {age === "S-XL" && (
        <>
          <Size1 />{" "}
        </>
      )}
    </Box>
  );
}

size1.js

import * as React from "react";
import Box from "@mui/material/Box";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";

export const Size1 = ["XS", "S", "M", "L", "XL"];

export default function BasicSelect() {
  const [size1, setSize1] = React.useState("");

  const handleChange = (event) => {
    setSize1(event.target.value);
  };

  return (
    <Box sx={{ minWidth: 120 }}>
      chosen size: {size1}
      <br /> <br />
      <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">Choose Size</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={size1}
          label="size1"
          onChange={handleChange}
        >
          <MenuItem value="XS">XS</MenuItem>
          <MenuItem value="S">S</MenuItem>
          <MenuItem value="M">M</MenuItem>
          <MenuItem value="L">L</MenuItem>
          <MenuItem value="XL">XL</MenuItem>
        </Select>
      </FormControl>
    </Box>
  );
}

Answer 1

Just add a listener in the parent component on the child and handle changes emitted from the child

parent.js

import * as React from "react";
import Box from "@mui/material/Box";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
import Size1 from "./size1";

export default function BasicSelect() {
  const [age, setAge] = React.useState("");

  const handleChange = (event) => {
    setAge(event.target.value);
  };


function handleSelectionUpdate(data){
//Whatever you want to do with the data passed
}
  return (
    <Box sx={{ minWidth: 120 }}>
      selected: {age}
      <br /> <br />
      <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">Category</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age}
          label="Age"
          onChange={handleChange}
        >
          <MenuItem value="S-XL">S-XL</MenuItem>
          <MenuItem value="Size2">Size2</MenuItem>
        </Select>
      </FormControl>
      {age === "S-XL" && (
        <>
          <Size1 onSelectionUpdate={handleSelectionUpdate} />{" "} //Change here
        </>
      )}
    </Box>
  );
}

child.js

import * as React from "react";
import Box from "@mui/material/Box";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";

export const Size1 = ["XS", "S", "M", "L", "XL"];

export default function BasicSelect(props) {
  const [size1, setSize1] = React.useState("");

  const handleChange = (event) => {
    setSize1(event.target.value);
    props.onSelectionUpdate(event.target.value)  //emit an event here 
  };

  return (
    <Box sx={{ minWidth: 120 }} {...props}>
      chosen size: {size1}
      <br /> <br />
      <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">Choose Size</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={size1}
          label="size1"
          onChange={handleChange}
        >
          <MenuItem value="XS">XS</MenuItem>
          <MenuItem value="S">S</MenuItem>
          <MenuItem value="M">M</MenuItem>
          <MenuItem value="L">L</MenuItem>
          <MenuItem value="XL">XL</MenuItem>
        </Select>
      </FormControl>
    </Box>
  );
}

Answer 2

I edited your code, please look https://codesandbox.io/s/category-selection-forked-rb8dl

Just remove onSelectionUpdate and it will work ;)