0

I need to pass props from wrapper to child component

Have a structure like this:

CabinetBlockContainer.jsx

smallChild.jsx

Right now my smallChild.jsx looks like:

return (
    <CabinetBlockContainer>
      <div className={props.className}>
        <Typography variant="h6" color="primary">
          {props.title}
        </Typography>
        <Typography variant="caption">{props.subtitle}</Typography>
      </div>
      <BalanceSmallBlock balance="1254.51" needIcon={props.needIcon} />
    </CabinetBlockContainer>
  );

and my container looks like: 

 return (
    <div className={props.className}>
      <div className="block-wrapper" >

      </div>
    </div>
  );
})

I have many styles for my blocks, that's why I created wrapper(CabinetBlockContainer). I need to pass props from my CabinetBlockContainer to its child component. I don't really know is it the best practice, but seems normal.

I have tried to find in documentation how to pass props like this, but have any solution.

Hubi
  • 104
  • 11

2 Answers2

1

Use {props.children} inside your wrapper, it seems you want to do something like this.

Aquib
  • 145
  • 1
  • 11
  • Thanks, that wss the thing I was looking for. Thank you! Found other solution export const CabinetBlockContainer = styled.div`` Which variant is better ? – Hubi Feb 13 '20 at 09:54
0

You can pass props to a children while cloning it with new props

for better understanding how props and state work please refer this

and here is an example of previously answered same question on SO

Nasiruddin Saiyed
  • 1,438
  • 1
  • 13
  • 31