"Deepest one wins"

[Jasper Dansercoer]

Not sure what the difference is between the two examples.

BASIC

<Titled title={() => 'Example.com'}>
  <h1>Welcome!</h1>
  <Titled title={title => `Homepage | ${title}`} />
</Titled>;

DEEPEST ONE WINS

<Titled title={() => 'Example.com'}>
  <Titled title={() => 'Homepage'} />
</Titled>;

I notice the former has the title variable in the title props, but how would this work with triple nested titles?

[Vojtech Miksu]

Actually, there's no difference. I just wanted to make it really clear that this pattern works even if you want to overwrite upstream titles (the same way how react-document-title or react-helmet work, although they don't give you an option to compose from you parent).

I notice the former has the title variable in the title props, but how would this work with triple nested titles?

The most inner nested will win. It's using reduce() to go through all title functions from top to bottom.

Maybe I should just delete the second example? Or enhance it somehow so it's not confusing?

[Jasper Dansercoer]

But then what explains the difference in output?

Homepage | Example.com

VS

Homepage

[Vojtech Miksu]

<Titled title={title => `Homepage | ${title}`} />

vs

<Titled title={() => 'Homepage'} />

[Jasper Dansercoer]

Not really clear what you're getting at.. How would you do triple nesting?

…

On Fri, Apr 13, 2018, 20:05 Vojtech Miksu ***@***.***> wrote: <Titled title={title => `Homepage | ${title}`} /> vs <Titled title={() => 'Homepage'} /> — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#2 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AcX0qycTgXOxSGgrqAsz6icbwN-lSrj-ks5toOjfgaJpZM4TRqjj> .

[Vojtech Miksu]

<Titled title={() => 'Example.com'}>
  <h1>Welcome!</h1>
  <Titled title={title => `Homepage | ${title}`}>
    <Titled title={title => `Subpage | ${title}`} />
  </Titled>
</Titled>;

would produce

Subpage | Homepage | Example.com