My child values are not changing while changing the state of the parent in React?

Question

I am having a problem when I click on my child component, I want that when I select my component, all siblings get deselected but that does not happens, Well here is my source code so you can understand more the situation.

Here is my Parent component :

// All importations are right

import React, { Component } from "react";

import MenuItem from "./MenuItem";

import Grid from "../../../../components/Grid";

import {
faFolderOpen,
faCogs,
faFileInvoice,
faMale,
faList
} from "@fortawesome/pro-light-svg-icons";

import "./style.css";


class MenuLeft extends Component {
   constructor(props) {
    super(props);
    this.state = {
        menuItems: [
            { id: 1, item: "Données personelles", icon: faMale, isSelected: true },
            { id: 2, item: "Synthèse", icon: faFolderOpen, isSelected: false },
            { id: 3, item: "Historique", icon: faList, isSelected: false },
            { id: 4, item: "Analyse de portefeuille", icon: faFolderOpen, isSelected: false },
            { id: 5, item: "Description", icon: faFileInvoice, isSelected: false },
            { id: 6, item: "Documents", icon: faFolderOpen, isSelected: false },
            { id: 7, item: "Opérations", icon: faCogs, isSelected: false }
        ],
    };
}


allDeselected = item => {
    let menuItem = this.state.menuItems;
    menuItem.forEach(function(elm) {
        elm.isSelected = elm.id === item ? true : false;
    });
    this.setState({ menuItems: menuItem });
};

renderItems(items) {
    console.log(items);
    return items.map(item => (
        <MenuItem
            key={item.id}
            id={item.id}
            item={item.item}
            icon={item.icon}
            isSelected={item.isSelected}
            allDeselected={this.allDeselected}
        />
    ));
}

render() {
    console.log(this.state.menuItems);
    return (
        <div className="co-menu">
            <div className="co-menu-left">
                {this.renderItems(this.state.menuItems)}
            </div>
        </div>
    );
}
}

export default MenuLeft;

and Here is my child component MenuItem :

class MenuItem extends Component {
constructor(props) {
    super(props);
    this.state = {
        isSelected: this.props.isSelected
    };
}

changeBackColor = key => {
    alert(key);
    this.props.allDeselected(key);
    this.setState({ isSelected: !this.state.isSelected });
};

render() {
    console.log("test" + this.props.id + "  : " + this.state.isSelected);
    return (
        <Grid
            onClick={() => this.changeBackColor(this.props.id)}
            container
            className={
                this.state.isSelected
                    ? "co-menu__backcolor co-menu__backcolor--selected"
                    : "co-menu__backcolor"
            }
        >
            <Grid item xs={12} className="co-menu__icon pb-0">
                <div className="co-menu__icon--centered">
                    <FontAwesomeIcon
                        icon={this.props.icon || ""}
                        size="3x"
                        className="co-menu__icon--color"
                    />
                </div>
            </Grid>
            <Grid item xs={12} className="co-menu__text pt-0">
                <Text content={this.props.item} className="co-menu__text--color" />
            </Grid>
            <Grid item xs={12} className="pt-0" />
        </Grid>
    );
}
}

export default MenuItem;

You can see that when I click my element I execute allDeselected method in the parent and I see my data using console.log and here is what I get as a result when I click the third item for example :

Which is fine until now, but the state.isSelected does not change when doing this and here is the message I get in my child rendering method when showing the data :

You can see that the first one ( which was selected at the beggining ) has to be deselected but it maintain the same old isSelected value.

Is is a logic problem or what ? I need help and any help would be much appreciated.

Answer 1

I would recommend you to make child components stateless and control everything state from a parent.

In the parent, you need to add another method.

onMenuClick(key) {
     this.allDeselected(key)
     this.setState((state) => {
          const updatedMenu = state.menuItems.map(menu => {
              if(menu.id === key)
                 return Object.assign({}, menu, { isSelected: !menu.isSelected });
              return menu;
          });
         return {
             ...state,
             menuItems: updatedMenu,
         }
     });
}

Then you can pass the data like this.

renderItems(items) {
    return items.map(item => (
        <MenuItem {...item} key={item.id} onMenuClick={this.onMenuClick}/>
    ));
}

now you can re-write your child like this to make it stateless.

const MenuItem = (props) => {
    const componentClassName = this.state.isSelected
        ? "co-menu__backcolor co-menu__backcolor--selected"
        : "co-menu__backcolor";
    return (
        <Grid
            onClick={() => props.onMenuClick(props.id)}
            container
            className={componentClassName}
        >
            <Grid item xs={12} className="co-menu__icon pb-0">
                <div className="co-menu__icon--centered">
                    <FontAwesomeIcon
                        icon={props.icon || ""}
                        size="3x"
                        className="co-menu__icon--color"
                    />
                </div>
            </Grid>
            <Grid item xs={12} className="co-menu__text pt-0">
                <Text content={props.item} className="co-menu__text--color" />
             </Grid>
             <Grid item xs={12} className="pt-0" />
        </Grid>
    )
}