{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/react/issues/12378","repository_url":"https://api.github.com/repos/facebook/react","labels_url":"https://api.github.com/repos/facebook/react/issues/12378/labels{/name}","comments_url":"https://api.github.com/repos/facebook/react/issues/12378/comments","events_url":"https://api.github.com/repos/facebook/react/issues/12378/events","html_url":"https://github.com/facebook/react/issues/12378","id":305519000,"number":12378,"title":"Different behavior of updating DOM while using ternary operator vs inline approaches","user":{"login":"satispunk","id":16405686,"avatar_url":"https://avatars1.githubusercontent.com/u/16405686?v=4","gravatar_id":"","url":"https://api.github.com/users/satispunk","html_url":"https://github.com/satispunk","followers_url":"https://api.github.com/users/satispunk/followers","following_url":"https://api.github.com/users/satispunk/following{/other_user}","gists_url":"https://api.github.com/users/satispunk/gists{/gist_id}","starred_url":"https://api.github.com/users/satispunk/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/satispunk/subscriptions","organizations_url":"https://api.github.com/users/satispunk/orgs","repos_url":"https://api.github.com/users/satispunk/repos","events_url":"https://api.github.com/users/satispunk/events{/privacy}","received_events_url":"https://api.github.com/users/satispunk/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-03-15T11:46:50Z","updated_at":"2018-03-15T15:40:13Z","closed_at":"2018-03-15T15:40:13Z","author_association":"NONE","body":"<!--\r\n  Note: if the issue is about documentation or the website, please file it at:\r\n  https://github.com/reactjs/reactjs.org/issues/new\r\n-->\r\n\r\n**Do you want to request a *feature* or report a *bug*?**\r\nNot sure if this is bug of feature\r\n**What is the current behavior?**\r\n\r\nThere are 2 very similar cases, often chosen by matter of preferences, but work with DOM is different \r\n\r\nIn the first case icon is updated in DOM \r\n```\r\nconst Expandable = ({expanded}) => {\r\n  const expandedIcon = <DropdownIcon className=\"expanded\" />\r\n  const collapsedIcon = <DropdownIcon className=\"collapsed\" />\r\n  const icon = expanded ? expandedIcon : collapsedIcon\r\n  return <div>{icon}</div>\r\n}\r\n```\r\n\r\nIn the second case icon is mounted/unmouted\r\n```\r\nconst Expandable = ({expanded}) => {\r\n  const expandedIcon = <DropdownIcon className=\"expanded\" />\r\n  const collapsedIcon = <DropdownIcon className=\"collapsed\" />\r\n\r\n  return <div>\r\n    {expanded && expandedIcon}\r\n    {!expanded && collapsedIcon}\r\n  </div>\r\n}\r\n```\r\n\r\n**If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:**\r\n\r\nhttps://codesandbox.io/s/jn7mm2l735\r\n\r\n**What is the expected behavior?**\r\n\r\nI expected \"update\" in both cases but might be wrong\r\n\r\n**Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?**\r\n\r\nWindows 10, Chrome 64\r\n"},"comment":{"url":"https://api.github.com/repos/facebook/react/issues/comments/373421053","html_url":"https://github.com/facebook/react/issues/12378#issuecomment-373421053","issue_url":"https://api.github.com/repos/facebook/react/issues/12378","id":373421053,"user":{"login":"jquense","id":339286,"avatar_url":"https://avatars2.githubusercontent.com/u/339286?v=4","gravatar_id":"","url":"https://api.github.com/users/jquense","html_url":"https://github.com/jquense","followers_url":"https://api.github.com/users/jquense/followers","following_url":"https://api.github.com/users/jquense/following{/other_user}","gists_url":"https://api.github.com/users/jquense/gists{/gist_id}","starred_url":"https://api.github.com/users/jquense/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jquense/subscriptions","organizations_url":"https://api.github.com/users/jquense/orgs","repos_url":"https://api.github.com/users/jquense/repos","events_url":"https://api.github.com/users/jquense/events{/privacy}","received_events_url":"https://api.github.com/users/jquense/received_events","type":"User","site_admin":false},"created_at":"2018-03-15T15:40:13Z","updated_at":"2018-03-15T15:40:13Z","author_association":"COLLABORATOR","body":"Yeah, these cases look similar but aren't the same. In the second case React sees two children: `false` and `icon`, and `icon`/`false` depending on the expanded value. So instead of swapping between the two elements it's unmounted the first and mounting the second. You _could_ tell react these are the same element with a `key` prop, but it'll still end up doing more work than you'd want, e.g. moving the the element from index `0` to `1` and back\r\n\r\nYou can use a ternary inline as well FYI.\r\n```jsx\r\nconst Expandable = ({expanded}) => {\r\n  const expandedIcon = <DropdownIcon className=\"expanded\" />\r\n  const collapsedIcon = <DropdownIcon className=\"collapsed\" />\r\n\r\n  return <div>{expanded ? expandedIcon : collapsedIcon}</div>\r\n}\r\n```\r\n\r\nor just\r\n```\r\n<DropdownIcon className={expanded ? 'expanded' : 'collapsed'} />\r\n```"}}
{"actor":{"display_login":"jquense"}}