"Passing Content to Components with {{yield}}" Section doesn't have a {{yield}} example

[RobAntcliff]

https://guides.emberjs.com/release/tutorial/part-1/component-basics/#toc_passing-content-to-components-with-yield

Hi 👋

I'm new to ember and was going through the Tutorial when I got to the "Passing Content to Components with {{yield}}" section. This section doesn't seem to have an example definition of the <Jumbo> component to show how it uses the {{yield}} block. Therefore, while following this guide, I still don't really know from this section how {{yield}} works.

If someone could give an example that would be great.

I would write a pull request myself but I'm pretty new to Ember so I'm not really sure how I would structure it.

Thanks!

[RobAntcliff]

I've just noticed that there's a {{yield}} in the code block above the section, my bad. But maybe it's still a bit confusing that there's no actual example of {{yield}} under the yield part of the tutorial?

[locks]

The title is a bit ambiguous. You are not using {{yield}} to pass the content, you are passing content to components that use {{yield}}, and that's what the code sample is demonstrating. Thanks for bringing this up! I'll put it in the agenda for the next learning meeting. It's Thursdays at 15h UTC on the Discord server if you feel like popping in :)

[jenweber]

I think a quick fix could be to remove the yield heading altogether so it doesn't look like we've moved onto another topic. This section could also use some more explanation of what is going on and when someone would use yield in practical settings.

A real-world example would be if you had a box/container that is help text about an app feature. You want to be able to put any kind of markup inside the modal. So you make a container component with yield in it:

<!-- InfoWrapper.hbs -->
<div class="info-box">
  {{yield}}
</div>

Then when you use the component, you can put anything inside it that you want:

<InfoWrapper>
  Some text!
</InfoWrapper>

<InfoWrapper>
 <p>Some text!<p>
 <HelpButton />
</InfoWrapper>

That content wrapped by the InfoWrapper shows up wherever you see Yield in the InfoWrapper template.