Passing props to MUI drawer-CodePudding

In my Setup component I have some input fields. Each input field has some data of their own which I've stored in a separate object dropdowns. With each input field there's a drawer component where there's a ID of that input field. I have a handleClick handler where I'm passing that ID to look for the object properties. Later setting that property in a state and passing that state as prop to MyDrawer component. But I'm getting [] when passed as a props. When I use a separate button and passed the handleClick, then I'm getting the data that I'm passing. But how do I send the input data as props in MyDrawer component. On clicking the MyDrawer it is returning me an empty array each time.

Setup

const dropdowns = {
  group: [
    { code: "10202", description: "10202 - 10202 - 10202 - 10202 - 10202" },
    { code: "10202", description: "10202 - 10202 - 10202 - 10202 - 10202" },
    { code: "10202", description: "10202 - 10202 - 10202 - 10202 - 10202" },
    { code: "10202", description: "10202 - 10202 - 10202 - 10202 - 10202" },
    { code: "10202", description: "10202 - 10202 - 10202 - 10202 - 10202" },
    { code: "10202", description: "10202 - 10202 - 10202 - 10202 - 10202" },
  ],
  supplier: [
    { code: "3039", name: "3039 - 3039 - 3039 - 3039 - 3039" },
    { code: "3039", name: "3039 - 3039 - 3039 - 3039 - 3039" },
    { code: "3039", name: "3039 - 3039 - 3039 - 3039 - 3039" },
    { code: "3039", name: "3039 - 3039 - 3039 - 3039 - 3039" },
    { code: "3039", name: "3039 - 3039 - 3039 - 3039 - 3039" },
    { code: "3039", name: "3039 - 3039 - 3039 - 3039 - 3039" },
  ],
  attribute: [
    { code: "274", name: "274 - 274 - 274 - 274 - 274" },
    { code: "274", name: "274 - 274 - 274 - 274 - 274" },
    { code: "274", name: "274 - 274 - 274 - 274 - 274" },
    { code: "274", name: "274 - 274 - 274 - 274 - 274" },
    { code: "274", name: "274 - 274 - 274 - 274 - 274" },
    { code: "274", name: "274 - 274 - 274 - 274 - 274" },
  ],
  unit: [
    { code: "EA", name: "EA - EA - EA - EA - EA" },
    { code: "EA", name: "EA - EA - EA - EA - EA" },
    { code: "EA", name: "EA - EA - EA - EA - EA" },
    { code: "EA", name: "EA - EA - EA - EA - EA" },
    { code: "EA", name: "EA - EA - EA - EA - EA" },
    { code: "EA", name: "EA - EA - EA - EA - EA" },
  ],
  uses: [
    { code: "1", name: "1 - 1 - 1 - 1 - 1" },
    { code: "1", name: "1 - 1 - 1 - 1 - 1" },
    { code: "1", name: "1 - 1 - 1 - 1 - 1" },
    { code: "1", name: "1 - 1 - 1 - 1 - 1" },
    { code: "1", name: "1 - 1 - 1 - 1 - 1" },
    { code: "1", name: "1 - 1 - 1 - 1 - 1" },
  ],
};

const SetupBar = () => {
  

  const [fieldData, setFieldData] = useState([]);

  const handleClick = (value) => {
    setFieldData(dropdowns[value]);
    toggleDrawer();
  };
  const [state, setState] = React.useState({
    right: false,
  });

  const toggleDrawer = (anchor, open) => (event) => {
    if (
      event.type === "keydown" &&
      (event.key === "Tab" || event.key === "Shift")
    ) {
      return;
    }

    setState({ ...state, [anchor]: open });
  };
  console.log(fieldData);

  return (
    <div className="parent">
      
        
        
        <div className="input-fields">
          <label htmlFor="group">Group Code</label>
          <div className="input-grp">
            <input type="text" />
            <MyDrawer
              id="group"
              onClick={(e) => handleClick(e.currentTarget.id)}
              data={fieldData}
              toggleDrawer={toggleDrawer}
              state={state}
            />
          </div>
        </div>
        <div className="input-fields">
          <label htmlFor="supplier">Supplier</label>
          <div className="input-grp">
            <input type="text" />
            <MyDrawer
              id="supplier"
              onClick={(e) => handleClick(e.currentTarget.id)}
              data={fieldData}
              toggleDrawer={toggleDrawer}
              state={state}
            />
          </div>
        </div>
        
        <div className="input-fields">
          <label htmlFor="attribute">Attribute ID</label>
          <div className="input-grp">
            <input type="text" />
            <MyDrawer
              id="attribute"
              onClick={(e) => handleClick(e.currentTarget.id)}
              data={fieldData}
              toggleDrawer={toggleDrawer}
              state={state}
            />
          </div>
        </div>
        <div className="input-fields">
          <label htmlFor="unit">Unit</label>
          <div className="input-grp">
            <input type="text" />

            <MyDrawer
              id="unit"
              onClick={(e) => handleClick(e.currentTarget.id)}
              data={fieldData}
              toggleDrawer={toggleDrawer}
              state={state}
            />
          </div>
        </div>
        <div className="input-fields">
          <label htmlFor="uses">Uses</label>
          <div className="input-grp">
            <input type="text" />

            <MyDrawer
              id="uses"
              onClick={(e) => handleClick(e.currentTarget.id)}
              data={fieldData}
              toggleDrawer={toggleDrawer}
              state={state}
            />
          </div>
        </div>
      </div>
    </div>
  );
};

export default SetupBar;

MyDrawer

export default function MyDrawer({ data, toggleDrawer, state }) {
  const list = (anchor) => (
    <Box
      role="presentation"
      onClick={toggleDrawer(anchor, false)}
      onKeyDown={toggleDrawer(anchor, false)}
    >
      <List>
        {data?.map((item, index) => (
          <ListItem button key={index}>
            <ListItemText primary={item.code} />
          </ListItem>
        ))}
      </List>
    </Box>
  );

  return (
    <div>
      <React.Fragment key="right">
        <Button
          onClick={toggleDrawer("right", true)}
          style={{
            fontSize: "25px",
            cursor: "pointer",
          }}
        >
          <CgArrowRightR />
        </Button>
        <Drawer
          anchor="right"
          open={state["right"]}
          onClose={toggleDrawer("right", false)}
        >
          {list("right")}
        </Drawer>
      </React.Fragment>
    </div>
  );
}

CodePudding user response：

You need to pass the onClick event listener to a actual DOM element. So pass it to any top level DOM element in your drawer component.

           <MyDrawer
              id="supplier"
              onClick={(id) => handleClick(id)}
              data={fieldData}
              toggleDrawer={toggleDrawer}
              state={state}
            />

That onClick will be passed to MyDrawer component as a prop.

export default function MyDrawer({ data, toggleDrawer, state, onClick, id }) {
  const list = (anchor) => (
    <Box
      role="presentation"
      onClick={toggleDrawer(anchor, false)}
      onKeyDown={toggleDrawer(anchor, false)}
    >
      <List>
        {data?.map((item, index) => (
          <ListItem button key={index}>
            <ListItemText primary={item.code} />
          </ListItem>
        ))}
      </List>
    </Box>
  );

  return (
    <div onClick={()=>onClick(id)}>
      <React.Fragment key="right">
        <Button
          onClick={toggleDrawer("right", true)}
          style={{
            fontSize: "25px",
            cursor: "pointer",
          }}
        >
          <CgArrowRightR />
        </Button>
        <Drawer
          anchor="right"
          open={state["right"]}
          onClose={toggleDrawer("right", false)}
        >
          {list("right")}
        </Drawer>
      </React.Fragment>
    </div>
  );
}