Skip to main content

Children

Managing children is a core concept that allows developers to compose flexible and reusable components. "Children" generally refer to the content or other components nested inside a parent component. Composability empowers developers to build modular interfaces.

Ember​

{{yield}} is used to render the content passed to a component from its parent (doc).

/components/bolded-project-name.hbs
<b>
  Ember to React cheat sheet
</b>
/components/greeting.hbs
<p>
  Hello {{yield}}!!!
</p>

React​

children is accessed from props to render nested content within a component (doc). Child components must be imported in React.

Live Editor
const BoldedProjectName = () => <b>Ember to React cheat sheet</b>

const Greeting = (props) => {
  const { children } = props;
  return (
    <p>Hello {children}!!!</p>
  )
}

render(
  <Greeting>
    <BoldedProjectName />
  </Greeting>
);
Result
Loading...