0

I have a Button component that accepts anything as a child. However, anytime an Icon component is passed into that Button I need a bit more control of the styling and need to wrap it inside of another div while also returning any other text, elements, or anything else that might be rendering alongside that Icon.

const Button = ({
    display,
    children,
    ...other
}) => {
    return (
        <div
            display={display}
            {...other}
        >
        {children}
        </div>
    );
};

So if I’m using this component, I’d use it like this:

    <Button>
      Here’s some text <Icon name=“smile” /> ...and more text after the icon
    </Button>

And expect the HTML output to look like this:

    <button>
      Here’s some text <div class=“AN-EXTRA-DIV-WRAP”><svg id=“smile”>…</svg></div> ...and more text after the icon
    </button>

How can I pull only the icon out and make the necessary transformations and return it in the same source order that was originally passed into the <Button> component

Corey Bruyere
  • 786
  • 1
  • 10
  • 21
  • For the mapping part maybe you could do something like this? https://stackoverflow.com/a/36424582/3550662 – Keno Feb 01 '19 at 06:15
  • You might want to loop through the `children` and check if it has an Icon, do the changes you need and merge it all into a new array: https://stackoverflow.com/a/32371612/3550662 – Keno Feb 01 '19 at 06:18

0 Answers0