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