React - menu po najechaniu na wyrenderowanych elementach

Question

Cześć. To mój pierwszy wpis i pilnie potrzebuję pomocy. Robię stronkę w React która z API ciągnie dane i na podstawie ich renderuje listę. W każdym elemencie listy jest img po najechaniu na które dla ul zmienia się klasa i staje się widoczna, czyli wyskakuje małe menu. Niestety nie wiem jak zrobić, by na jednym konkretnym wyrenderowanym i najechanym myszką elemencie to menu wyskakiwało. Teraz niestety wyskakuje na wszystkich na raz co jest niezamierzone. Staram się to jakoś uzależnić od id, ale brak mi już pomysłów.

import '../Styles/Container.scss';
import React, { Component } from 'react';
import menu from '../Images/menu.png';



class Container extends Component {
    constructor(props) {
        super(props);
        this.menuEnter = this.menuEnter.bind(this);
    }

    state = {
        servers: [],
        serverId: [],
        serverName: '',
        serverStatus: '',
        isVisible: false,
    };


    componentDidMount() {
        fetch('http://localhost:4454/servers')
            .then(response => response.json())
            // .then(data => console.log(data))

            .then(data => {
                this.setState ({
                    servers: data,
                    serverId: data.id,
                    serverName: data.name,
                    serverStatus: data.status,
                    isVisible: false
                }, console.log(this.state.servers))
            })
            .catch(error => console.log(error))
    }

    componentDidUpdate() {
        console.log(this.state.servers);
    }


    menuEnter = () => {
        console.log('Działa');
       this.setState(prevState => ({ isVisible: !prevState.isVisible }));
    };





    render() {

        const {isVisible} = this.state;
        return(
            <div className="prostok-t-1">
                <section className='grupa-1'>
                    <div className='title'>
                        <input className='form' type="text" placeholder='Search'/>
                        <h2 className='servers'>Servers</h2>
                        <h3 className='number-of-elements-16'>Numbers of elements: 16</h3>
                    </div>
                    <div className='prostok-t-4'>
                        <div className='place'>
                            <div className="name">
                                <h3>Name</h3>
                            </div>
                            <div className="condition">
                                <h3>Status</h3>
                            </div>
                        </div>

                        <div>{this.state.servers.map((server) => {
console.log(server);


                            return (
                        <div className="server" key={server.id}>
                                        <p className="area">{server.name}</p>
                                        <p className="status">{server.status}</p>
                                        <img onMouseOver={() => this.menuEnter(server.id)} className='menu' src={menu} alt="menu"/>
                                        <ul className={`box ${isVisible ? "menuEnter" : " submenu"}`}>
                                            <li>Turn on</li>
                                            <li>Turn off</li>
                                            <li>Reboot</li>
                                        </ul>
                                    </div>
                                )

                            })}
                        </div>
                    </div>
                </section>
            </div>
        )
    }
}

export default Container;

 

Answer 1

cały div o klasie server powinien być osobnym komponentem wówczas nie bedziesz miał tych problemów. Gdy zamienisz to na komponent każdy komponent w .map bedzie miał swój osobny state ;)