Ad

When Moving JSX Content To Separate File It Doesn't Render Properly

- 1 answer

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?

Ad

Answer

Does it work if you move the <React.Fragment />?

// Parent component: 

export default function() {
  return (
      <MyAwesomeToolbar order={order} />
  );
}

// MyAwesomeComponent: 

export default function(self) {
  let { order } = self.props;
  return (
    <React.Fragment>
      <Toolbar slot="fixed" bottom>
        This will be fixed to bottom of page
        {order.name}
      </Toolbar>
    </React.Fragment>
  );
}
Ad
source: stackoverflow.com
Ad