React: Mapping children of a parent component

I think this solution is the simplest for wrap every child. When the children are rendered, you receive an instance of the component, not the component function. And you just need to wrap the instance into the wrapper component as shown below.

this.props.children.map(child => <Wrapper>{child}</Wrapper> )

For TypeScript:

React.Children.map(props.children, child => {
  return <Wrapper>{child}</Wrapper>
})

To wrap your children into a wrapper just put the call to React.Children.map into the wrapper component:

const OpaqueWrapper = ({ children }) => (
    // check that children is defined 
    // if you do not want your wrapper to be rendered empty
    children && (
        <Wrapper>
            {React.Children.map(children, child => (
                React.cloneElement(child, {style: {...child.props.style, opacity: 0.5}})
            ))}
        </Wrapper>
    )
);

Also note that you have to merge the styles provided to the original child with the styles injected or you will lose the ability to style the children at all.

See this codesandbox for a working example.

As to why it did not work in your code: Are you sure that your <Card> component does handle the style prop correctly, i.e. applying it to it's children?

EDIT:

The sloution wraps all children components in a single wrapper, but I would like to wrap each child with the applied wrapper , as shown in my question.

The just move the wrapper into React.Children.map:

const OpaqueWrapper = ({ children }) => (        
    React.Children.map(children, child => (
       <Wrapper>
           {React.cloneElement(child, {style: {...child.props.style, opacity: 0.5}})}
       </Wrapper>
    )))
);

And here the Typescript version when you write properties:

  const mapped = Children.map(children, (child, index) => {
    if(React.isValidElement(child)) {
      return React.cloneElement(child, {
        ...child.props,
        isFirst: index === 0,
        isLast: !Array.isArray(children) || index === children.length - 1,
      })
    }
    return null
  })

Another variant for TypeScript which I think is clean:

const ChildrenWithProps = Children.map(children, child =>
    cloneElement(child as JSX.Element, props),
)

used like:

return (
  <div>
    {ChildrenWithProps}
  </div>
);

Of course, you need to know beforehand that what is passed as children definitely will be a valid child element, or you need to check it with isValidElement as previous answers suggested.