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

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.

CodePudding user response：

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,