Rendering a function with React – kentcdodds

  • But there are reasons for the API as it is and that’s not what we’re going over in this newsletter…With ReactSo thinking about this in the context of React:const getHomeContent = getContent(‘pages.home’)const ui = ( a href=”/about” {getHomeContent(‘nav.about’)} /a)// that’ll get you:a href=”/about”About/aSo far so good.
  • Anyway, this will break the app:const getHomeContent = getContent(‘pages.typo’)const ui = ( a href=”/about” {getHomeContent(‘nav.about’)} /a)// 💥 error 💥Again, this is happening because getContent(‘pages.typo’) will return the string {pages.typo} (to indicate that there’s no content at that path and the developer needs to fix that problem to get the content)….
  • The issue is that you can’t invoke a string but that’s what’s happening because getHomeContent is a string, not a function.A solution and a new problemSo the change I made this week makes it so when there’s no content at a given path, instead of a string, it returns a “sorta-curried”…
  • No problem.So now this wont throw an error, but we lose rendering the path if there’s no content!const getHomeContent = getContent(‘pages.typo’)const ui = ( a href=”/about” {getHomeContent(‘nav.about’)} /a)// that’ll get you:a href=”/about”/aAnd we want to make sure that we show the missing content so it’s more obvious for developers (yes…
  • Let’s rewrite the above to make this more clear:const getHomeContent = getContent(‘pages.typo’)const aboutContent = ui = a in this example is a function because the call to getContent had a typo, so we’ll never actually find content that matches the full path.

NOTE: This is a cross-post from my newsletter. I publish each email two weeks after it’s sent. Subscribe to get more content like this earlier right in your inbox! 💌 This week I was working on an…

Rendering a function with ReactHow I tricked React into rendering a function (not call it… render it)NOTE: This is a cross-post from my newsletter. I publish each email two weeks after it’s sent. Subscribe to get more content like this earlier right in your inbox! 💌This week I was working on an internal module at PayPal and had to do something kinda sorta-hacky with React. I thought You’d be interested to hear what I learned.No, this isn’t about render props. If you were hoping for that… callback later 😉I see what you did thereContextSo react-i18n (not the npm one… one we made at PayPal internally) has this API that I call “sorta-curried”. I wrote about it a bit in my last newsletter.So here’s an example:import getContent, {init} from ‘react-i18n’init({ content: { pages: { home: { nav: { about: ‘About’, contactUs: ‘Contact us’, } } } }})// here’s the sorta-curried part…// These all result in exactly the same thing: etc…There are reasons the API is this way, and I’m not going to go over them all. If you’re not a fan of the API, you’re not alone. But there are reasons for the API as it is and that’s not what we’re going over in this newsletter…With ReactSo thinking about this in the context of React:const getHomeContent = getContent(‘pages.home’)const ui = ( a href=”/about” {getHomeContent(‘nav.about’)} /a)// that’ll get you:a href=”/about”About/aSo far so good. But, what if you mess up and have a typo?Before this week, here’s what happened:const ui = ( a href=”/about”…

Rendering a function with React – kentcdodds