Child component doesn't get rendered properly

Questions
1

Let say I have this:

// Parent component:

export default function() {
  return (
    <React.Fragment>
      <Toolbar slot="fixed" bottom>
        This will be fixed to bottom of page
        {order.name}
      </Toolbar>
    </React.Fragment>
  )
}

I want to make the parent component with the least of code possible - shared
into small cuts, so the toolbar will be in a child component so it will be
looking just like this:

// Parent component: 

export default function() {
  return (
    <React.Fragment>
      <MyAwesomeToolbar order={order} />
    </React.Fragment>
  )
}

// MyAwesomeComponent: 

export default function(self) {
  let { order } = self.props
  return (
    <Toolbar slot="fixed" bottom>
      This will be fixed to bottom of page
      {order.name}
    </Toolbar>
  )
}

In the first example - when the toolbar is actually hard coded in the parent component,
everything works good - the toolbar lays in the bottom of the page.
But when doing it the second way, the toolbar lays just not in the bottom but
float in the middle of the page without the fixed attribute as well.

I have tried to make a component using class, or just a simple render file (.JSX).
Both didn’t work.

How to render child component with the same properties and styles as it was layed in the parent?

2

You need to set slot prop on child in parent component. There is no sense and it will not work having slot on root element of component. Slots are controlled by parent

1 Like
3

Done. Work as expected. Thanks.