Comment by awirth | Hacker News Reader

Comment by awirth | Hacker News Reader

Parent Full thread

"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