特定の画像のOpacityを変化させる方法について（React)
解決したいこと
Reactにて画像をOpacityを変化させるコードを書いています．
マウスカーソルを当てた画像に対して，Opacityの変化を適用させたいのですが，
すべての画像（3枚）にOpacityの変化が発生していしまいます．
画像はmapにより，JSX→htmlに変換しています．
正しいコード（マウスカーソルを当てた画像に対してのみ，Opacityの変化を適用させる）について，
ご教示いただきたく，よろしくおねがいします．
発生している問題・エラー
import React, {Component} from 'react';
import './App.css';
class Main extends React.Component{
constructor(props) {
super(props);
this.state = {
// opacity: '1',
effect:false,
hovered:false
}
}
onMouseEnterHandler(){
this.setState({
hovered: true
})
}
onMouseLeaveHandler(){
this.setState({
hovered: false
})
}
render(){
const places = [
{name:'hongkong', image:'/image/hongkong.jpg', opacity:'0.5'},
{name:'prague', image:'/image/prague.jpg', opacity:'0.5'},
{name:'croatia', image:'/image/croatia.jpg', opacity:'0.5'},
]
return (
<div>
{places.map((place)=>{
return(
<div className="text-center">
<h1>{place.name}</h1>
<img
id= {place.name}
src={place.image}
alt={place.name}
style={{width:'1000px',opacity:this.state.hovered ? 1:0.5}}
onMouseEnter={()=>{this.onMouseEnterHandler()}}
onMouseLeave={()=>{this.onMouseLeaveHandler()}}
/>
</div>
)
})}
</div>
);
}
}
export default Main;
0
