Skip to main content

You are not logged in. Your edit will be placed in a queue until it is peer reviewed.

We welcome edits that make the post easier to understand and more valuable for readers. Because community members review edits, please try to make the post substantially better than how you found it, for example, by fixing grammar or adding additional resources and hyperlinks.

Required fields*

7
  • 14
    I like this approach, it makes me cool among my workmates. Kidding aside, from the looks of it, the props are just passed as a key-value pair after all, is that correct?
    – JohnnyQ
    Commented Jan 31, 2017 at 9:30
  • 3
    If condition is false, this will try to expand/iterate over false, which I don't think is correct.
    – Lars Nyström
    Commented Feb 14, 2017 at 13:14
  • 4
    @LarsNyström, That makes sense. The spread operator accepts only iterables, where false is not one. Just check with Babel. This works with it when condition evaluates to false since the way Babel implements the operator. Though a trivial workaround could be ...( condition ? { disabled: true } : {} ), it becomes a bit verbose then. Thanks for this nice input!
    – Season
    Commented Feb 14, 2017 at 14:23
  • 1
    +1 This approach is required if you want to conditionally output data-* or aria-* attributes, as they're a special case in JSX, so data-my-conditional-attr={ false } will output data-my-conditional-attr="false" rather than omitting the attribute. facebook.github.io/react/docs/dom-elements.html
    – ptim
    Commented Jul 26, 2017 at 7:36
  • Any idea how to do this with an attribute that takes an array or jsx expression? columns={{ xs: 4, sm: 8, md: 12 }} say if I wanted to change the numbers based on a boolean?
    – Jared Rice
    Commented Jul 13, 2022 at 19:42