ButtonGroup component using props.children using mui react

Question

I using Buttongroup component where i want to props.children inside Buttongroup Component.I'm able to achieve only one button , how do i loop or use 3buttons inside Buttongroup. Please help . Below is my code. Any help would be appreciated . With my below code i'm getting only one button. I'm expecting image result

import * as React from "react";
import Button from "@mui/material/Button";
import ButtonGroup from "@mui/material/ButtonGroup";

export const mycomponent = (props) => {
  const {  children, } = props;
  return (
     <ButtonGroup{...props}>
          <Button {...props}>{props.children}</Button> 
           <Button {...props}>{props.children}</Button> 
            <Button {...props}>{props.children}</Button> 
     </ButtonGroup> 
  );
};
mycomponent.propTypes = {
 children: PropTypes.node, 
};
mycomponent.defaultProps = {
 children: [],
};

Please show how you are using this component. I want to see the props you are feeding to this. — Hamed Siaban, Dec 12 '22 at 15:35

Polina Shestakova · Accepted Answer · 2022-12-12T15:43:16.237

1

Maybe you need something like this:

import * as React from "react";
import Button from "@mui/material/Button";
import ButtonGroup from "@mui/material/ButtonGroup";

export const mycomponent = (props) => {
  const {  children } = props;
  return (
     <ButtonGroup{...props}>
       {React.Children.map(props.children, (child) => {
          return (<>{child}</>) 
      })
     }
     </ButtonGroup> 
  );
};
mycomponent.propTypes = {
 children: PropTypes.node, 
};
mycomponent.defaultProps = {
 children: [],
};

edited Dec 12 '22 at 15:43

answered Dec 12 '22 at 11:23

Polina Shestakova

71
3

still i'm getting single button . no luck – user3448925 Dec 12 '22 at 12:06
Are there all the buttons you need in the children array? Usually child is a React.Element, maybe you should pass an array of Button components as children – Polina Shestakova Dec 12 '22 at 13:56
https://stackoverflow.com/questions/49291442/react-children-map-vs-children-map-whats-the-different – Polina Shestakova Dec 12 '22 at 14:00
yes all the three buttons as an children – user3448925 Dec 12 '22 at 14:04
If your children are Button components, you can just return child from React.Children.map function. (I've edited code snippet) – Polina Shestakova Dec 12 '22 at 15:46

ButtonGroup component using props.children using mui react

1 Answers1