Изменение состояния при добавлении элемента в массив?

Question

[GoNext]

Здравствуйте, такой вопрос, есть массив cls, мне нужно , чтобы при наведении на элемент списка в дочернем элементе, бг из state пушился в массив cls и этим самым менялся фон Layout, дело в том, что элементы пушатся, но бг не меняется

import React from 'react'
import './Layout.scss'
import NavBar from '../components/navBar/NavBar'
import Footer from '../components/footer/Footer'

class Layout extends React.Component {
    state = {
        isHovered: false,
        list: [
            {name: 'Behance', id: 1, background: 'blue'},
            {name: 'Dribbble', id: 2, background: 'red'},
            {name: 'Instagram', id: 3, background: 'green'},
        ],

    }

    handleHover = () => {
        this.setState(prevState => ({
            isHovered: !prevState.isHovered
        }));
    }
    
    cls = [
        'Layout'
    ]
    

    render (){
        return (
            <div className = {this.cls.join('')}>
                <NavBar/>
                <Footer
                    list = {this.state.list}
                    hover = {this.handleHover = this.handleHover.bind(this)}
                    cls = {this.cls}
                    handleState = {this.handleState}
                />
            </div>
        )
    }
}

export default Layout

Вот дочерний элемент

import React from 'react'
import classes from './Footer.module.scss'
import Typed from 'react-typed';

const Footer = props => {


    return (
        <div className = {classes.Footer}>
            <div className = {classes.left}>
                <Typed
                    strings={['Пока мы кому-то разрабатываем новый сайт, можете взглянуть на портфолио',]}
                    typeSpeed={40}
                />
                <br/>

                <h4>
                    презентация.pdf
                </h4>
            </div>
            <div className = {classes.center}>
                <h4>
                    [e-mail]
                </h4>
            </div>
            <div className = {classes.right}>
                <ul>
                    {props.list.map((li, index) => {
                        return (
                            <li   
                                onMouseLeave= {() => props.cls.splice(li.background)}
                                onMouseEnter = {() => props.cls.push(li.background)} 
                                key = {index + 1}
                            >
                                {li.name}
                            </li>
                        )
                    })}
                </ul>
            </div>
        </div>
    )
}

export default Footer

Answer 1

[Modin]

props.cls.push(li.background)
Это так не работает. В родителя надо добавить:

updateCls = (value) => {
this.setState({
cls: [...this.state.cls, value]
})
}

И юзать его в футере.

Answer 2

[Егор Живагин]

При изменении обычного свойства класса не происходит ререндер
Перенесите cls в стейт

Answer 3

[GoNext]

Все равно, в массив значение добавляется, но бг не меняется

import React from 'react'
import './Layout.scss'
import NavBar from '../components/navBar/NavBar'
import Footer from '../components/footer/Footer'

class Layout extends React.Component {
    state = {
        isHovered: false,
        list: [
            {name: 'Behance', id: 1, background: 'blue'},
            {name: 'Dribbble', id: 2, background: 'red'},
            {name: 'Instagram', id: 3, background: 'green'},
        ],
        cls : [
            'Layout'
        ]

    }

    handleHover = () => {
        this.setState(prevState => ({
            isHovered: !prevState.isHovered
        }));
    }
    
    

    render (){
        return (
            <div className = {this.state.cls.join('')}>
                <NavBar/>
                <Footer
                    list = {this.state.list}
                    hover = {this.handleHover = this.handleHover.bind(this)}
                    cls = {this.state.cls}
                    handleState = {this.handleState}
                />
            </div>
        )
    }
}

export default Layout