Show or hide element in React

Question

I am messing around with React js for the first time and cannot find a way to show or hide something on a page via click event   I am not loading any other library to the page  so I am looking for some native way using the React library   This is what I have so far   I would like to show the results div when the click event fires       var Search  React createClass       handleClick  function  event            console log this prop              render  function              return                lt div className  date-range  gt                   lt input type  submit  value  Search  onClick  this handleClick    gt               lt  div gt                        var Results   React createClass       render  function              return                lt div id  results  className  search-results  gt                  Some Results              lt  div gt                        React renderComponent  lt Search   gt    document body

User · Answer

this example shows how you can switch between components by using a toggle which switches after every 1sec   import React   Fragment Component  from  react   import ReactDOM from  react-dom    import    styles css    const Component1        gt      lt div gt       lt img  src  https   i pinimg com originals 58 df 1d 58df1d8bf372ade04781b8d4b2549ee6 jpg    gt      lt  div gt     const Component2        gt      return        lt div gt          lt img  src  http   www chinabuddhismencyclopedia com en images thumb 2 2e 12ccse jpg 250px-  12ccse jpg    gt     lt  div gt             class App extends Component      constructor props         super props       this state            toggleFlag false                timer     gt        this setState  toggleFlag  this state toggleFlag         componentDidMount         setInterval this timer  1000          render         let   toggleFlag    this state     return          lt Fragment gt           toggleFlag    lt Component1   gt     lt Component2   gt           lt  Fragment gt                const rootElement   document getElementById  root    ReactDOM render  lt App   gt   rootElement

User · Answer

A simple method to show hide elements in React using Hooks  const  showText  setShowText    useState false     Now  let s add some logic to our render method    showText  amp  amp   lt div gt This text will show  lt  div gt     And  onClick       gt  setShowText  showText     Good job

User · Answer

I start with this statement from the React team      In React  you can create distinct components that encapsulate behaviour   you need  Then  you can render only some of them  depending on the   state of your application       Conditional rendering in React works the same way conditions work in   JavaScript  Use JavaScript operators like if or the conditional   operator to create elements representing the current state  and let   React update the UI to match them    You basically need to show the component when the button gets clicked  you can do it two ways  using pure React or using CSS  using pure React way  you can do something like below code in your case  so in the first run  results are not showing as hideResults is true  but by clicking on the button  state gonna change and hideResults is false and the component get rendered again with the new value conditions  this is very common use of changing component view in React     var Search   React createClass     getInitialState  function         return   hideResults  true            handleClick  function         this setState   hideResults  false             render  function         return          lt div gt           lt input type  submit  value  Search  onClick  this handleClick    gt             this state hideResults  amp  amp   lt Results   gt           lt  div gt               var Results   React createClass     render  function         return        lt div id  results  className  search-results  gt        Some Results      lt  div gt              ReactDOM render  lt Search   gt   document body     If you want to do further study in conditional rendering in React  have a look here

User · Answer

React circa 2020  In the onClick callback  call the state hook s setter function to update the state and re-render    x000D   x000D  const Search        gt    x000D    const  showResults  setShowResults    React useState false  x000D    const onClick        gt  setShowResults true  x000D    return   x000D       lt div gt  x000D         lt input type  submit  value  Search  onClick  onClick    gt  x000D          showResults    lt Results   gt    null   x000D       lt  div gt  x000D      x000D    x000D   x000D  const Results        gt    x000D     lt div id  results  className  search-results  gt  x000D      Some Results x000D     lt  div gt  x000D    x000D   x000D  ReactDOM render  lt Search   gt   document querySelector   container    x000D   lt script src  https   cdnjs cloudflare com ajax libs react 16 13 1 umd react production min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react-dom 16 13 1 umd react-dom production min js  gt  lt  script gt  x000D   x000D   lt div id  container  gt  x000D     lt  -- This element s contents will be replaced with your component  -- gt  x000D   lt  div gt  x000D   x000D   x000D    JSFiddle  React circa 2014  The key is to update the state of the component in the click handler using setState  When the state changes get applied  the render method gets called again with the new state    x000D   x000D  var Search   React createClass   x000D      getInitialState  function     x000D          return   showResults  false    x000D         x000D      onClick  function     x000D          this setState   showResults  true     x000D         x000D      render  function     x000D          return   x000D               lt div gt  x000D                   lt input type  submit  value  Search  onClick  this onClick    gt  x000D                    this state showResults    lt Results   gt    null   x000D               lt  div gt  x000D             x000D        x000D      x000D   x000D  var Results   React createClass   x000D      render  function     x000D          return   x000D               lt div id  results  className  search-results  gt  x000D                  Some Results x000D               lt  div gt  x000D             x000D        x000D      x000D   x000D  ReactDOM render   lt Search   gt    document getElementById  container     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 6 2 react min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react-dom 15 6 2 react-dom min js  gt  lt  script gt  x000D   x000D   lt div id  container  gt  x000D     lt  -- This element s contents will be replaced with your component  -- gt  x000D   lt  div gt  x000D   x000D   x000D    JSFiddle

User · Answer

with the newest version react 0 11 you can also just return null to have no content rendered   Rendering to null

User · Answer

I was able to use css property  quot hidden quot   Don t know about possible drawbacks  export default function App         const  hidden  setHidden    useState false       return          lt div gt           lt button onClick       gt  setHidden  hidden   gt HIDE lt  button gt           lt div hidden  hidden  gt hidden component lt  div gt         lt  div gt

User · Answer

Here comes the simple  effective and  best solution with a Classless React Component for show hide the elements  Use of React-Hooks which is available in the latest create-react-app project  that uses React 16  import React   useState  from  react   function RenderPara    const  showDetail setShowDetail    useState false    const handleToggle        gt  setShowDetail  showDetail    return    lt React Fragment gt       lt h3 gt          Hiding some stuffs       lt  h3 gt       lt button onClick  handleToggle  gt Toggle View lt  button gt      showDetail  amp  amp   lt p gt          There are lot of other stuffs too      lt  p gt    lt  React Fragment gt        export default RenderPara    Happy Coding

User · Answer

Here is my approach   import React    useState   from  react    function ToggleBox   title  children        const  isOpened  setIsOpened    useState false      function toggle         setIsOpened wasOpened   gt   wasOpened          return        lt div className  box  gt         lt div className  boxTitle  onClick  toggle  gt           title         lt  div gt         isOpened  amp  amp             lt div className  boxContent  gt             children           lt  div gt                lt  div gt           In code above  to achieve this  I m using code like    opened  amp  amp   lt SomeElement   gt     That will render SomeElement only if opened is true  It works because of the way how JavaScript resolve logical conditions   true  amp  amp  true  amp  amp  2     will output 2 true  amp  amp  false  amp  amp  2     will output false true  amp  amp   some string      will output  some string  opened  amp  amp   lt SomeElement   gt      will output SomeElement if  opened  is true  will output false otherwise  and false will be ignored by react during rendering     be careful with  falsy  values eg const someValue   0  someValue  amp  amp   lt SomeElement   gt     will output 0  which will be rednered by react    it ll be better to    someValue  amp  amp   lt SomeElement   gt     will render nothing as we cast the value to boolean   Reasons for using this approach instead of CSS  display  none     While it might be  cheaper  to hide an element with CSS - in such case  hidden  element is still  alive  in react world  which might make it actually way more expensive    it means that if props of the parent element  eg   lt TabView gt   will change - even if you see only one tab  all 5 tabs will get re-rendered the hidden element might still have some lifecycle methods running - eg  it might fetch some data from the server after every update even tho it s not visible the hidden element might crash the app if it ll receive incorrect data  It might happen as you can  forget  about invisible nodes when updating the state you might by mistake set wrong  display  style when making element visible - eg  some div is  display  flex  by default  but you ll set  display  block  by mistake with display  invisible    block     none  which might break the layout using someBoolean  amp  amp   lt SomeNode   gt  is very simple to understand and reason about  especially if your logic related to displaying something or not gets complex in many cases  you want to  reset  element state when it re-appears  eg  you might have a slider that you want to set to initial position every time it s shown   if that s desired behavior to keep previous element state  even if it s hidden  which IMO is rare - I d indeed consider using CSS if remembering this state in a different way would be complicated

User · Answer

class App extends React Component     state         show  true         showhide        gt        this setState   show   this state show             render         return          lt div className  App  gt           this state show  amp  amp              lt img src  logo  className  App-logo  alt  logo    gt                     lt a onClick  this showhide  gt Show Hide lt  a gt         lt  div gt

User · Answer

This is a nice way to make use of the virtual DOM   class Toggle extends React Component     state         show  true         toggle        gt  this setState  currentState    gt    show   currentState show        render         return          lt div gt           lt button onClick  this toggle  gt            toggle   this state show    show     hide            lt  button gt               this state show  amp  amp   lt div gt Hi there lt  div gt          lt  div gt                  Example here  Using React hooks   const Toggle        gt      const  show  toggleShow    React useState true      return        lt div gt         lt button         onClick       gt  toggleShow  show          gt          toggle   show    show     hide          lt  button gt             show  amp  amp   lt div gt Hi there lt  div gt        lt  div gt          Example here

User · Answer

Use this lean and short syntax     this state show  amp  amp   lt MyCustomComponent   gt

User · Answer

class Toggle extends React Component     state         show  true         render         const  show    this state      return          lt div gt           lt button onClick      gt  this setState  show   show     gt            toggle   show    show     hide            lt  button gt               show  amp  amp   lt div gt Hi there lt  div gt          lt  div gt

User · Answer

use ternary condition    this state yourState    lt MyComponent   gt    null       this state yourState  amp  amp   lt MyComponent   gt       this state yourState     string     lt MyComponent   gt           this state yourState     string   amp  amp   lt MyComponent   gt       Normal condition  if this state yourState    return  lt MyComponent   gt   else    return null

User · Answer

Simple hide show example with React Hooks   srry about no fiddle   const Example        gt       const  show  setShow    useState false      return        lt div gt         lt p gt Show state   show  lt  p gt         show              lt p gt You can see me  lt  p gt            null         lt button onClick       gt  setShow  show   gt       lt  div gt            export default Example

User · Answer

There are several great answers already  but I don t think they ve been explained very well and several of the methods given contain some gotchas that might trip people up  So I m going to go over the three main ways  plus one off-topic option  to do this and explain the pros and cons  I m mostly writing this because Option 1 was recommended a lot and there s a lot of potential issues with that option if not used correctly   Option 1  Conditional Rendering in the parent   I don t like this method unless you re only going to render the component one time and leave it there  The issue is it will cause react to create the component from scratch every time you toggle the visibility  Here s the example  LogoutButton or LoginButton are being conditionally rendered in the parent LoginControl  If you run this you ll notice the constructor is getting called on each button click  https   codepen io Kelnor pen LzPdpN editors 1111  class LoginControl extends React Component     constructor props        super props       this handleLoginClick   this handleLoginClick bind this       this handleLogoutClick   this handleLogoutClick bind this       this state    isLoggedIn  false          handleLoginClick         this setState  isLoggedIn  true           handleLogoutClick         this setState  isLoggedIn  false           render         const isLoggedIn   this state isLoggedIn       let button   null      if  isLoggedIn          button    lt LogoutButton onClick  this handleLogoutClick    gt         else         button    lt LoginButton onClick  this handleLoginClick    gt              return          lt div gt           lt Greeting isLoggedIn  isLoggedIn    gt           button         lt  div gt                class LogoutButton extends React Component    constructor props  context       super props  context      console log  created logout button          render        return          lt button onClick  this props onClick  gt          Logout        lt  button gt                class LoginButton extends React Component    constructor props  context       super props  context      console log  created login button          render        return          lt button onClick  this props onClick  gt          Login        lt  button gt                function UserGreeting props      return  lt h1 gt Welcome back  lt  h1 gt      function GuestGreeting props      return  lt h1 gt Please sign up  lt  h1 gt      function Greeting props      const isLoggedIn   props isLoggedIn    if  isLoggedIn        return  lt UserGreeting   gt         return  lt GuestGreeting   gt      ReactDOM render     lt LoginControl   gt     document getElementById  root        Now React is pretty quick at creating components from scratch  However  it still has to call your code when creating it  So if your constructor  componentDidMount  render  etc code is expensive  then it ll significantly slow down showing the component  It also means you cannot use this with stateful components where you want the state to be preserved when hidden  and restored when displayed   The one advantage is that the hidden component isn t created at all until it s selected  So hidden components won t delay your initial page load  There may also be cases where you WANT a stateful component to reset when toggled  In which case this is your best option   Option 2  Conditional Rendering in the child  This creates both components once  Then short circuits the rest of the render code if the component is hidden  You can also short circuit other logic in other methods using the visible prop  Notice the console log in the codepen page  https   codepen io Kelnor pen YrKaWZ editors 0011  class LoginControl extends React Component     constructor props        super props       this handleLoginClick   this handleLoginClick bind this       this handleLogoutClick   this handleLogoutClick bind this       this state    isLoggedIn  false          handleLoginClick         this setState  isLoggedIn  true           handleLogoutClick         this setState  isLoggedIn  false           render         const isLoggedIn   this state isLoggedIn      return          lt div gt           lt Greeting isLoggedIn  isLoggedIn    gt           lt LoginButton isLoggedIn  isLoggedIn  onClick  this handleLoginClick   gt           lt LogoutButton isLoggedIn  isLoggedIn  onClick  this handleLogoutClick   gt         lt  div gt                class LogoutButton extends React Component    constructor props  context       super props  context      console log  created logout button          render        if  this props isLoggedIn         return null            return          lt button onClick  this props onClick  gt          Logout        lt  button gt                class LoginButton extends React Component    constructor props  context       super props  context      console log  created login button          render        if this props isLoggedIn         return null            return          lt button onClick  this props onClick  gt          Login        lt  button gt                function UserGreeting props      return  lt h1 gt Welcome back  lt  h1 gt      function GuestGreeting props      return  lt h1 gt Please sign up  lt  h1 gt      function Greeting props      const isLoggedIn   props isLoggedIn    if  isLoggedIn        return  lt UserGreeting   gt         return  lt GuestGreeting   gt      ReactDOM render     lt LoginControl   gt     document getElementById  root        Now  if the initialization logic is quick and the children are stateless  then you won t see a difference in performance or functionality  However   why make React create a brand new component every toggle anyway  If the initialization is expensive however  Option 1 will run it every time you toggle a component which will slow the page down when switching  Option 2 will run all of the component s inits on first page load  Slowing down that first load  Should note again  If you re just showing the component one time based on a condition and not toggling it  or you want it to reset when toggledm  then Option 1 is fine and probably the best option   If slow page load is a problem however  it means you ve got expensive code in a lifecycle method and that s generally not a good idea  You can  and probably should  solve the slow page load by moving the expensive code out of the lifecycle methods  Move it to an async function that s kicked off by ComponentDidMount and have the callback put it in a state variable with setState    If the state variable is null and the component is visible then have the render function return a placeholder  Otherwise render the data  That way the page will load quickly and populate the tabs as they load  You can also move the logic into the parent and push the results to the children as props  That way you can prioritize which tabs get loaded first  Or cache the results and only run the logic the first time a component is shown   Option 3  Class Hiding  Class hiding is probably the easiest to implement  As mentioned you just create a CSS class with display  none and assign the class based on prop  The downside is the entire code of every hidden component is called and all hidden components are attached to the DOM   Option 1 doesn t create the hidden components at all  And Option 2 short circuits unnecessary code when the component is hidden and removes the component from the DOM completely   It appears this is faster at toggling visibility according some tests done by commenters on other answers but I can t speak to that   Option 4  One component but change Props  Or maybe no component at all and cache HTML   This one won t work for every application and it s off topic because it s not about hiding components  but it might be a better solution for some use cases than hiding  Let s say you have tabs  It might be possible to write one React Component and just use the props to change what s displayed in the tab  You could also save the JSX to state variables and use a prop to decide which JSX to return in the render function  If the JSX has to be generated then do it and cache it in the parent and send the correct one as a prop  Or generate in the child and cache it in the child s state and use props to select the active one

User · Answer

I created a small component that handles this for you  react-toggle-display   It sets the style attribute to display  none  important based on the hide or show props    Example usage     var ToggleDisplay   require  react-toggle-display     var Search   React createClass       getInitialState  function             return   showResults  false               onClick  function             this setState   showResults  true                render  function             return                lt div gt                   lt input type  submit  value  Search  onClick  this onClick    gt                   lt ToggleDisplay show  this state showResults  gt                       lt Results   gt                   lt  ToggleDisplay gt               lt  div gt                        var Results   React createClass       render  function             return                lt div id  results  className  search-results  gt                  Some Results              lt  div gt                        React renderComponent  lt Search   gt   document body

User · Answer

In some cases higher order component might be useful   Create higher order component   export var HidableComponent    ComposedComponent    gt  class extends React Component       render             if   this props shouldHide  null  amp  amp  this props shouldHide       this props hidden              return null          return  lt ComposedComponent     this props     gt              Extend your own component   export const MyComp  HidableComponent MyCompBasic     Then you can use it like this    lt MyComp hidden  true        gt   lt MyComp shouldHide  this props useSomeFunctionHere        gt    This reduces a bit boilerplate and enforces sticking to naming conventions  however please be aware of that MyComp will still be instantiated - the way to omit is was mentioned earlier      hidden  amp  amp   lt MyComp       gt

User · Answer

lt style type  text css  gt       hidden   display none     lt  style gt    render  function         return          lt div className  this props shouldHide    hidden        gt          This will be hidden if you set  lt tt gt props shouldHide lt  tt gt           to something truthy         lt  div gt               or in more modern JS and stateless react const Example   props   gt   lt div className  props shouldHide   gt Hello lt  div gt

User · Answer

This can also be achieved like this  very easy way    class app extends Component      state          show  false        toggle       gt       var res   this state show     this setState   show   res         render       return      lt button onClick   this toggle   gt  Toggle  lt  button gt          this state show     lt div gt  HELLO  lt  div gt     null

User · Answer

class FormPage extends React Component        constructor props              super props              this state                  hidediv  false                            handleClick              this setState             hidediv  true                            render            return           lt div gt             lt div className  date-range  hidden    this state hidediv  gt                  lt input type  submit  value  Search  onClick  this handleClick    gt             lt  div gt             lt div id  results  className  search-results  hidden     this state hidediv  gt                          Some Results             lt  div gt           lt  div gt

User · Answer

Use rc-if-else module  npm install --save rc-if-else   import React from  react   import   If   from  rc-if-else    class App extends React Component       render             return                lt If condition  this props showResult  gt                  Some Results              lt  If gt

User · Answer

x000D   x000D  var Search   React createClass   x000D      getInitialState  function     x000D          return   showResults  false    x000D         x000D      onClick  function     x000D          this setState   showResults  true     x000D         x000D      render  function     x000D          return   x000D               lt div gt  x000D                   lt input type  checkbox  value  Search  onClick  this onClick    gt  x000D                    this state showResults    lt Results   gt    null   x000D               lt  div gt  x000D             x000D        x000D      x000D   x000D  var Results   React createClass   x000D      render  function     x000D          return   x000D               lt div id  results  className  search-results  gt  x000D                   lt input type  text    gt  x000D               lt  div gt  x000D             x000D        x000D      x000D   x000D  ReactDOM render   lt Search   gt    document getElementById  container     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 6 2 react min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react-dom 15 6 2 react-dom min js  gt  lt  script gt  x000D   x000D   lt div id  container  gt  x000D     lt  -- This element s contents will be replaced with your component  -- gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Best practice is below according to the documentation    this state showFooter  amp  amp   lt Footer   gt     Render the element only when the state is valid

User · Answer

var Search  React createClass    getInitialState       gt    showResults  false     onClick       gt  this setState   showResults  true      render  function         const   showResults     this state     return         lt div className  date-range  gt          lt input type  submit  value  Search  onClick  this handleClick    gt          showResults  amp  amp   lt Results   gt         lt  div gt                var Results   React createClass       render  function              return                lt div id  results  className  search-results  gt                  Some Results              lt  div gt                        React renderComponent  lt Search   gt    document body

User · Answer

If you would like to see how to TOGGLE the display of a component checkout this fiddle   http   jsfiddle net mnoster kb3gN 16387   var Search   React createClass       getInitialState  function             return                shouldHide false                       onClick  function             console log  onclick            if  this state shouldHide               this setState                   shouldHide  true                          else                      this setState                   shouldHide  false                                  render  function         return          lt div gt           lt button onClick  this onClick  gt click me lt  button gt           lt p className  this state shouldHide    hidden         gt yoyoyoyoyo lt  p gt         lt  div gt                ReactDOM render   lt Search   gt    document getElementById  container

User · Answer

Here is an alternative syntax for the ternary operator    this state showMyComponent    lt MyComponent   gt    null    is equivalent to    this state showMyComponent  amp  amp   lt MyComponent   gt     Learn why  Also alternative syntax with display   none    lt MyComponent style  this state showMyComponent          display   none       gt   However  if you overuse display   none   this leads to DOM pollution and ultimately slows down your application

User · Answer

You set a boolean value in the state  e g   show    and then do   var style       if   this state show      style display    none     return  lt div style  style  gt     lt  div gt

User · Answer

If you use bootstrap 4  you can hide element that way  className  this state hideElement    invisible     visible

User · Answer

Use ref and manipulate CSS   One way could be to use React s ref and manipulate CSS class using the browser s API  Its benefit is to avoid rerendering in React if the sole purpose is to hide show some DOM element on the click of a button       Parent jsx import React    Component   from  react   export default class Parent extends Component       constructor                  this childContainer   React createRef              toggleChild        gt            this childContainer current classList toggle  hidden              render              return                                 lt button onClick  this toggleChild  gt Toggle Child lt  button gt               lt div ref  this childContainer  gt                   lt SomeChildComponent  gt               lt  div gt                                           styles css  hidden       display  none      PS Correct me if I am wrong

[javascript] Show or hide element in React

Examples related to javascript

Examples related to reactjs