How to add class on hover in react component which is mapped

I am trying to add active class to a an individual component which is mapped. i want to do something like when i hover over a component for example the first component then it only adds active class to that component only and not every component that have been mapped in the render method.

this is the state

this.state = {
            projects: [
                {
                    type: 'react',
                    source: quoteMachine,
                    name: 'Quote Machine'
                    
                },
                {
                    type: 'react',
                    source: markup,
                    name: 'Markup Text'
                },
                {
                    type: 'react',
                    source: drumMachine,
                    name: 'Drum Machine'
                },
                {
                    type: 'react',
                    source: calculator,
                    name: 'Calculator'
                },
                {
                    type: 'react',
                    source: pomodoro,
                    name: 'Pomodoro Clock'
                },
                {
                    type: 'htmlCss',
                    source: tribute,
                    name: 'Tribute Page'
                },
                {
                    type: 'htmlCss',
                    source: survey,
                    name: 'Survey Form'
                },
                {
                    type: 'htmlCss',
                    source: landingPage,
                    name: 'Product Landing Page'
                },
                {
                    type: 'htmlCss',
                    source: documentation,
                    name: 'Javascript documentation'
                },
                

            ],
            currentProjects: [],
            isHover: false,
            hoverIndex: null,
        }

this is the render method

render() {

        let projx = this.state.currentProjects.map((proj, index) => {
            return (
                <Project 
                    key={index} 
                    source={proj.source} 
                    name={proj.name} alt={proj.name} 
                />
            )
        })

        return (
            <div className='projects' id='projects'>
                <h2>Projects</h2>
                <div className='project-btns'>
                    <button className='project-btn' id='all' onClick={this.allProjects}>ALL</button>
                    <button className='project-btn' id='htmlCss' onClick={this.htmlCssProjects}>HTML/CSS</button>
                    <button className='project-btn' id='react' onClick={this.reactProjects}>REACT</button>
                </div>
                <div className='display'>
                <div className='project'>
                    {projx}
                </div>
                </div>
            </div>
        )
    }

You could just add a “project” class to all your projects and then target that in CSS

.project:hover {

}

its actually not working

yes its working… i was using same className to 2 different div so that is why is was not working. thank you

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.