The component is not hidden when the onClick functoin is called, but the state does change

Question

I am learning React by reading the React wiki and following examples from freeCodeCamp, but I stumbled upon this issue and I can't seem to understand what I might be missing.

My intention is to have a panel with buttons, when you click on one of these a Component is shown or hidden.

import React, { Component, useState } from "react";

import { Box, Typography, Stack, Button, Divider } from '@mui/material';

import ListUsers from '../components/ListUsers'
import ListTasks from "../components/ListTasks";


class Admin extends Component {

    constructor() {
        super();
        this.state = {
            /*Start with all components hidden*/
            toogleShowAllUsers: false,
            toogleShowAllTasks: false
        };
        this.changeState = this.changeState.bind(this)
    }

    changeState(name) {
        console.log(name)
        switch(name) {
            case 'toogleShowAllUsers':
                this.state = ({ toogleShowAllUsers: !this.state.toogleShowAllUsers })
            break;
            case 'toogleShowAllTasks':
                this.state = ({ toogleShowAllTasks: !this.state.toogleShowAllTasks })
                break;
            default:
        }
    }

    render() {
        const { toogleShowAllUsers, toogleShowAllTasks } = this.state
        return (
            /*Options menu*/
            <Box>
                <Typography 
                    variant="h4" 
                    fontWeight="bold" 
                    sx={{ fontSize: { lg: '44px', xs: '30px' } }} 
                    mb="46px">Admin Panel
                </Typography>
                <Stack
                    direction="row"
                    divider={<Divider 
                                orientation="vertical" 
                                flexItem
                                sx={{bgcolor: "secondary.light"}}/>}
                    spacing={2}>
                        <Button>Crear usuario</Button>
                        <Button>Eliminar usuario</Button>
                        <Button onClick={() => this.changeState('toogleShowAllUsers')}>Listar Usuarios</Button>
                </Stack>
                <Stack
                    direction="row"
                    divider={<Divider 
                                orientation="vertical" 
                                flexItem
                                sx={{bgcolor: "secondary.light"}}/>}
                    spacing={2}>
                        <Button>Crear tarea</Button>
                        <Button>Eliminar tarea</Button>
                        <Button>Asignar tarea</Button>
                        <Button onClick={() => this.changeState('toogleShowAllTasks')}>Listar Tareas</Button>
                </Stack>
    
                {/*Render options here*/}
                {toogleShowAllUsers ? <ListUsers /> : null}
                {toogleShowAllTasks ? <ListTasks /> : null}
            </Box>
            )
        }
    }   
    
export default Admin;

I have inspected similar questions on SO here and here, but to no avail.

I would appreciate it, if you could assist/guide me on understanding what I might be missing or when did I do wrong in order to learn this awesome tool.

Azzy · Accepted Answer · 2022-12-01T02:05:45.023

Quick fix, should be this.setState({ })

  changeState(name) {
        console.log(name)
        switch(name) {
            case 'toogleShowAllUsers':
                // using functional state updater
                this.setState((preState) => ({ toogleShowAllUsers: !preState.toogleShowAllUsers }))
            break;
            case 'toogleShowAllTasks':
                this.setState((preState) => ({ toogleShowAllTasks: !preState.toogleShowAllTasks }))
                break;
            default:
        }
    }

More about using state in class components

The React beta docs are good starting point for functional components and managing state in function components

Hope it helps,

The component is not hidden when the onClick functoin is called, but the state does change

1 Answers1