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>
)
}