Podpięcie onMouseEnter pod array - React

Question

Cześć,

Ćwiczę w Reactjs i mam problem, którego nie mogę przeskoczyć.
Chcę podpiąć wydarzenie onMouseEnter i onMouseLeave pod każdy element osobno w array iconsSvg.
Niestety moje rozwiązania albo uaktywniają zdarzenia pod wszystkie elementy równocześnie, lub nie uaktywniają ich w ogóle.

Proszę, też o ocenę co mógłbym poprawić w kodzie.

 

class Icons extends React.Component {
    state = {        
        iconsSvg: [
            {id: 1, value: gitlab, name: "Gitlab", showModal: false},
            {id: 2, value: react, name: "React", showModal: false},
            {id: 3, value: gulp, name: "Gulp", showModal: false},
            {id: 4, value: webpack, name: "Webpack", showModal: false},
            {id: 5, value: affinity, name: "Affinity", showModal: false},
            {id: 6, value: wordpress, name: "Wordpress", showModal: false}, 
            {id: 7, value: bootstrap, name: "Bootstrap", showModal: false}, 
            {id: 8, value: sass, name: "Sass"}
        ]
    }

    handleShowModal =() => {
        let test = this.state.iconsSvg.showModal  ? 'false' : 'true';
        this.setState ({showModal: test});            
    }

    render() {
        const { showModal } = this.state.iconsSvg

        return (
        <div className={styles.iconsBar}>
            <ul>
                {this.state.iconsSvg.map(icon=>
                <li key={icon.id}
                    onMouseEnter={this.handleShowModal}
                    onMouseLeave={this.handleShowModal}
                >
                { showModal ? <Modal /> :null }   
                    <object className={styles.shadow} 
                        type="image/svg+xml" data={icon.value}>icon.id.toString()
                    </object>                   
                </li>)}                
            </ul>
        </div>
        );
    }
}

 

Answer 1

handleShowModal =() => {
  let test = this.state.iconsSvg.showModal  ? 'false' : 'true';
  this.setState ({showModal: test});            
}

A debugowałeś sobie co tutaj przypisujesz do zmiennej test?

W iconsSvg masz tablicę, a nie właściwości showModal, więc odwołanie:

this.state.iconsSvg.showModal

zawsze zwróci undefined, jako próbę odwołania się do nieistniejącej właściwości showModal, przez co przechodzisz do warunku alternatywnego a więc przypisujesz do test wartość true.

Comments

class Icons extends React.Component {
    constructor (props) {
    super(props);
        this.state = {        
            iconsSvg: [
                {id: 0, value: gitlab, name: "Gitlab", showModal: false},
                {id: 1, value: react, name: "React", showModal: false},
                {id: 2, value: gulp, name: "Gulp", showModal: false},
                {id: 3, value: webpack, name: "Webpack", showModal: false},
                {id: 4, value: affinity, name: "Affinity", showModal: false},
                {id: 5, value: wordpress, name: "Wordpress", showModal: false}, 
                {id: 6, value: bootstrap, name: "Bootstrap", showModal: false}, 
                {id: 7, value: sass, name: "Sass", showModal: false}
            ]
        }
    }
 
    handleShowModal = e => {
        let test = this.state.iconsSvg[e].showModal;
        this.setState(prevState => ({
            test: !prevState.test
          }));
        console.log('this is:',this.state.iconsSvg[e].name, test)          
    }
 
    render() {
        const { showModal } = this.state.iconsSvg
 
        return (
        <div className={styles.iconsBar}>
            <ul>
                {this.state.iconsSvg.map(icon=>
                <li key={icon.id}
                    onClick={(e) => this.handleShowModal(icon.id, e)}
                >
                { showModal ? <Modal /> :null }   
                    <object className={styles.shadow} 
                        type="image/svg+xml" data={icon.value}>
                    </object>                   
                </li>)}                
            </ul>
        </div>
        );
    }
}

Przeczytałem trochę dokumentacji i fora  i udało mi się powiązać tę pozycję w tablicy.
Zmodyfikowałem kod z użyciem prevState, ale tym razem nie zmienia mi stawień w state.

console.log(test ) this is: Gitlab false

Po drugim kliknięciu cały czas jest false.