How to hide an element in reactjs

Question

So I am working on an app and I need to hide the Userform component until after they click the register button which is part of the Login component. This may be a simple question, but I am having a hard time with it.

This is my app.js

import React from 'react';
import './App.css';
import UserForm from './components/UserForm';
import Login from './components/Login.js';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      display: 'register',
      acc: null
    }
    this.setAppState = this.setAppState.bind(this);
  }

  setAppState(event) { this.setState(event) }

  render() {
    const { display } = this.state;

    switch(display) {
      case 'register':
        return <div className="App">
          <UserForm
            setAppState={this.setAppState}
          />
        </div>
      case 'login':
        return <div className="App">
          <Login 
            setAppState={this.setAppState}
          />
        </div>
      default:
    }
  }
}

I think everything is fine. If you pass the Right value in the setAppState function. — moshfiqrony, Aug 19 '21 at 03:28
Possible duplicate of https://stackoverflow.com/questions/24502898/show-or-hide-element-in-react — Rifky Niyas, Aug 19 '21 at 03:33
Hello. To debug this issue, you would need to share your `Login` component to show whether `setAppState` prop is being called with the right arguments when it is used in `Login`. — rexess, Aug 19 '21 at 03:52
Please update question to include all relevant code to the issue in a [Minimal, Complete, and Reproducible Code Example](https://stackoverflow.com/help/minimal-reproducible-example). Since we can't see what `Login` is doing we can't say why your code is or isn't working as you expect. — Drew Reese, Aug 19 '21 at 04:08

Richard Hpa · Answer 1 · 2021-08-19T04:48:43.050

1

The render function actually needs a return value even if it is just null. So I would look at refactoring your app always return something. I would have the switch outside of the render function and have it something like this.


  const switchApp(display) => {
    switch(display) {
      case 'register':
        return <UserForm
            setAppState={this.setAppState}
          />
      case 'login':
        return  <Login 
            setAppState={this.setAppState}
          />
      default:
        return null;
    }
  }
   
  render() {
    const { display } = this.state;
    if(!display){
       return null;
    }
    return (
      <div className="App">
         { switchApp(display) }
      </div>
    )
  }

edited Aug 19 '21 at 04:48

answered Aug 19 '21 at 04:09

Richard Hpa

2,353
14
23

It would much simpler to just add `return null;` in the `default` case than add another branching factor, wouldn't it? – Drew Reese Aug 19 '21 at 04:40
yeah true you could, but what's the point in even calling a switch statement and going through all the cases if there isn't a display – Richard Hpa Aug 19 '21 at 04:50

How to hide an element in reactjs

1 Answers1