Conditionally render lyrics based off track index? - mysql

Question

I'm trying to create a track list. I want to render the track lyrics based off of the track name that was clicked on for the specified id. However, I'm having some trouble doing so.
The data is being fetched from MySQL.
Here is my code:
Model:
var db = require("../dbconnection");
var music = {
insertmusicTracks: function(data, callback) {
db.query(
"insert music_tracks set track_music_id=?, track_user_id=?, trackName=?, trackLyrics=?",
[data.albumId, data.userId, data.songName, data.songLyrics],
callback
);
},
selectmusicTracks: function(data, callback) {
db.query(
"select mo.track_music_id, mo.trackName, mo.trackLyrics, mt.authorName, mt.trackTitle, mt.trackYear, mt.trackcoverImg from music_tracks mo left join music_topics mt on mt.music_id=mo.track_music_id where mo.track_music_id=?",
[data.trackmusicId],
callback
);
}
};
module.exports = music;
View:
import React from "react";
import { Link } from "react-router-dom";
import { Modal, Button } from "react-bootstrap";
import Headericons from "../common/header-icons";
import Header from "../common/header";
import Footer from "../common/footer";
import Addtracklist from "../components/addmusictrack";
import dataTip from "data-tip";
import appController from "../../controllers/appController";
import musicService from "../../services/musicService";
class Musictracks extends React.Component {
constructor(props) {
super(props);
this.state = {
userId: "",
isAdmin: false,
albumName: "",
musicId: this.props.match.params.musicid,
trackData: []
};
}
handleClose = () => {
this.setState({ show: false });
};
handleShow = () => {
this.setState({ show: true });
};
selectTracks = async () => {
const selectmusicTracks = await musicService.selectmusicTracks({
trackmusicId: this.props.match.params.musicid
});
this.setState({
trackData: selectmusicTracks
});
console.log(this.state);
};
showLyrics = async trackId => {
this.setState({
lyricId: trackId
});
console.log(this.state);
};
async componentDidMount() {
if (appController.isAdmin().role_id === 3) {
await this.setState({
userId: appController.isAdmin().userID,
isAdmin: true
});
}
this.setState({
albumName: this.props.match.params.title
});
await this.selectTracks();
await this.showLyrics();
}
render() {
return (
<div className="fluid-container">
<Headericons />
<Header />
<div className="container" id="musictrackContainer">
<h1>{appController.removeHyphen(this.state.albumName)}</h1>
<div className="row">
<Link className="btn btn-primary" id="previouspage" to="/music">
← Go Back
</Link>
</div>
{this.state.isAdmin === true ? (
<div className="row" id="superAdmin">
<div className="col-md-12">
<i
className="far fa-plus-square fa-2x"
onClick={this.handleShow}
/>
</div>
<div className="static-modal">
<Modal show={this.state.show} onHide={this.handleClose}>
<Modal.Header closeButton>
<Modal.Title>Add Track</Modal.Title>
</Modal.Header>
<Modal.Body>
<Addtracklist
albumId={this.state.musicId}
userId={this.state.userId}
closeModal={this.handleClose}
/>
</Modal.Body>
</Modal>
</div>
</div>
) : null}
<div className="row">
<div className="col-md-4">
<div className="trackContainer">
<ol>
{this.state.trackData.map((rows, index) => (
<div
className="trackName data-tip-right"
data-tip={"View " + rows.trackName}
key={rows.trackName + "-" + rows.track_music_id}
onClick={e => this.showLyrics(index)}
>
<li tabIndex={index}>
{index + 1 + ". " + rows.trackName}
<i className="fas fa-arrow-right" />
</li>
</div>
))}
</ol>
</div>
</div>
<div className="col-md-8">
// This is where I'm stuck I'm not sure how I can render lyrics based off of the track name.
{this.state.trackData.map((row, index) =>
this.state.lyricId === index ? (
<div className="trackLyrics">{row.trackLyrics}</div>
) : null
)}
</div>
</div>
</div>
<Footer />
</div>
);
}
}
export default Musictracks;
The above snippet is my attempt to try and render the lyrics based off of track name that the user clicks on.

Answer 1

Nevermind I figured it out. I made a small error in my code. I simply had to replace row.index with index and it worked. Edited my question.