I stumbled upon this article: Modifying Li Element Colors in HTML <ul> Using onclick Event
It seems to address what I need, but I'm a little unsure of how to implement something similar in a rails app that also utilizes react/redux. Most of the rails apps I've worked on don't contain jquery, so I'm uncertain about where or how I would apply this concept. Any guidance would be appreciated!
I was considering utilizing the onClick
event for the li elements and creating a function to toggle classes on the clicked element while removing the classes from the other li elements, but I'm not entirely sure if this approach is correct.
// Here's my component rendering the ul element
import React from 'react';
import TrackIndexItem from './track_index_item';
const TrackDetail = ({ tracks }) => (
<ul>
{ tracks.map(track => <TrackIndexItem key={ track.id } track={track} />) }
</ul>
);
export default TrackDetail;
// This is the component rendering the li elements
import React from 'react';
const TrackIndexItem = ({ track }) => (
<li>
<div className="track-info">
<i className="music-note-icon"></i>
<div className="track-text">
<p>{track.title}</p>
<p>{track.artist} • {track.album}</p>
</div>
</div>
</li>
);
export default TrackIndexItem;
// Below is the CSS styling for the li elements:
li {
display: flex;
flex-direction: row;
padding: 0 20px;
.track-info {
display: flex;
flex-direction: column;
position: relative;
.music-note-icon {
position: absolute;
content: image_url('music-note-icon.png');
width: 10px;
height: 15px;
top: 20px;
}
.track-text {
margin-left: 25px;
p {
font-family: 'ProximaNova-Regular';
}
p:first-of-type {
font-size: 18px;
color: $white;
}
p:last-of-type {
font-size: 16px;
color: $gray;
margin-top: -15px;
}
}
}
}