Hacker News Reader

Comment by wereHamster | Hacker News Reader

Elements as values of attributes are extremely useful in custom components.

    <FancyArticle heading={<h1>...</h1>} body={<main>...</main>} />

View on HN

Other systems address that by providing a <template>, # include or {% block %} element that allow you to state where/what things should be inserted.

I dislike the attribute way because:

- attributes are used for everything. It seems nice and simple - one single way to do all things ! - but it means when you see something passed this way, you never know what it's for without diving into the code or doc. There is no convention. Is it data ? Is it a children ? Is it a callback ? If yes, what for ?

- it allows people to make big inline blobs of code. And as often, when something ugly is easy on the short run, and the clean things is hard, they do the easy thing. JS is full of those stuff, and I wish we would not add new ones in the tooling we use.

- The syntax is so unatural when you have been doing HTML for decades. I understand the desire not to be limited by legacy, but here it's not working around any limit. There are alternatives. So we just break habits to break habits. Again something quite common in modern JS: let's replace the wheel by a different one. Not better. Just different. Because, reasons.

- It's easy to get wrong. Case in point, your comment and the parent don't even have the same syntax because one of you couldn't, from the top of the head, come up with the proper one.

I personally have never passed a JSX element through an attribute, and I don't see what the use case would be. It smells like an anti-pattern. Why wouldn't you use a render function that returns an element, or just pass the component and create the element in the child?

The places I see it the most are in routing and access control components. Here's a convoluted example in my router, not common throughout the application.

      <Route
        path="/petition/:petitionId/page/next"
        render={({ match }) => (
          <InRoles
            roles={Roles.pageReviewer}
            deny={`/`}
            allow={PS(match.params.petitionId, SECTION.PAGES, null, ({ petitionId }) => (
              <PageReviewNextPage petition={petitionId} page={'-'} direction={1} />
            ))}
          />
        )}
      />

Route comes from react-router. InRoles is internal to the application and accepts a string or function/component... if it's a string it redirects as appropriate, or renders. if null/empty just hides the result. PS is a function that returns a nested/common component structure.

A more simple example would be...

    <Fragment>
      <Switch>
        <Route exact path="/" render={({ location }) => <Home search={location.search} />} />

"Case in point, your comment and the parent don't even have the same syntax because one of you couldn't, from the top of the head, come up with the proper one."

I'm not sure what you mean by this. They're both valid. I don't find the one enclosed in {} nearly as confusing, because once you're inside curly braces you can have arbitrary javascript expressions so all bets are off.

The thing that's strange is being able to have a JSX Element as an attribute value without enclosing curly braces. Perhaps the use case of passing arguments to custom elements is more common than I thought thought.

Specifically "<foo a=<bar/>/>" is weird.

FWIW, I've never actually seen that in real-world React code-- neither in libraries I've used, nor in my own code. It's more common (and much more natural) to see JSX Elements passed as children to other components, like you see with a react-bootstrap Panel, for example:

    <Panel>
      <Panel.Heading>Foobar</Panel.Heading>
      <Panel.Body>
         Panel body contents
      </Panel.Body>
    <Panel>

Which is itself just passing the Panel.Heading and Panel.Body elements as an array to Panel's children prop, but it's much more natural than having some arbitrarily complex hierarchy of elements passed in another prop.

Huh. I've been using React for several years and am deeply involved in the community, and this is the first time I've ever seen a JSX element passed as a prop without enclosing curlies.

In other words, I've seen this:

    <SomeComponent leftPanel={<LeftPane />} />

but I didn't even know you could do this:

    <SomeComponent leftPanel=<LeftPane />  />

Small quirk of JSX syntax that almost no one knows exists, I guess.

Reply on news.ycombinator.com