Reader: Update RP on DevDocs

[jancavan]

This updates the new Related Posts cards on Devdocs.

Before:

After:

[matticbot]

Test live: https://calypso.live/?branch=fix/reader/related-posts-v2-devdocs

[jancavan]

Although this is using the same exact data for each RP example. If it's a quick fix and anyone can help me with that, it'd be much appreciated.

[samouri]

@jancavan I changed it to use a unique source for each post

[jancavan]

Thanks @samouri! It was throwing some errors for me which I fixed in: f461c8a, however, the data you added works perfectly 🎉

[jancavan]

[spen]

Should the arrow function body be wrapped with parens since it's multi-line? Like so:

moreOnSameSite.map( item => (
    <Component />
)

There's a PR open to change up some of the JS guidelines so I'm not so sure how strict it'll be on wrapping blocks and return values so this is just a suggestion :)

[samouri]

@spentay, thanks for calling this out!
I wasn't sure what our javascript guidelines said on the topic, so I took a peek.

Turns out that for multi-line arrow function we should use braces like so:

moreOnSameSite.map( item => {
    return <Component />
} )

[spen]

Either parens or braces work, just with their own caveats!
Using curlies would require you to explicitly return the component.
However when using parens you don't since the code within them will just be evaluated and returned implicitly to the arrow function.

So these will both essentially do the same thing:

moreOnSameSite.map( item => {
    return <Component /> // explict return
} )

moreOnSameSite.map( item => (
    <Component /> // implicit return 
) )

As a rule of thumb I typically use braces when some sort of extra logic or or variable declarations need to happen within the block before returning the component/value and use parens when the value can just be returned implicitly

Here's a good recent example of the paren usage

This has got me thinking though... the first example labelled as 'bad' uses parens for execution but claims that doing so is 'too magic'... Since it seems to be a fairly common pattern for returning components it might be worth revising or adding another example to the guidelines! I'll get on that and link the PR here :D

[spen]

Same goes here :)

[bluefuton]

I approve this message.