Cant display value from array in graphql query using React - reactjs

Question

Im using React with Apollo on the frontend and i'm having trouble displaying the title and the id of the array likes. Im iterating using the method .map over the tracks array and i can access all the values in it except the values stored in the array likes. Here is the code which explains it better then words i guess :)
App.js
import React from "react";
import withStyles from "#material-ui/core/styles/withStyles";
import { Query } from 'react-apollo'
import { gql } from 'apollo-boost'
import SearchTracks from '../components/Track/SearchTracks'
import TrackList from '../components/Track/TrackList'
import CreateTrack from '../components/Track/CreateTrack'
import Loading from '../components/Shared/Loading'
import Error from '../components/Shared/Error'
const App = ({ classes }) => {
return (
<div className={classes.container}>
<SearchTracks />
<CreateTrack />
<Query query={GET_TRACKS_QUERY}>
{({ data, loading, error }) => {
if (loading) return <Loading />
if (error) return <Error error={error} />
return <TrackList tracks={data.tracks} />
}}
</Query>
</div>
);
};
const GET_TRACKS_QUERY = gql`
query getTracksQuery {
tracks {
id
title
description
url
likes {
title
id
}
postedBy {
id
username
}
}
}
`
const styles = theme => ({
container: {
margin: "0 auto",
maxWidth: 960,
padding: theme.spacing.unit * 2
}
});
export default withStyles(styles)(App);
TrackList.js
import React from "react";
import withStyles from "#material-ui/core/styles/withStyles";
import List from "#material-ui/core/List";
import ListItem from "#material-ui/core/ListItem";
import ListItemText from "#material-ui/core/ListItemText";
import Typography from "#material-ui/core/Typography";
import ExpansionPanel from "#material-ui/core/ExpansionPanel";
import ExpansionPanelDetails from "#material-ui/core/ExpansionPanelDetails";
import ExpansionPanelSummary from "#material-ui/core/ExpansionPanelSummary";
import ExpansionPanelActions from "#material-ui/core/ExpansionPanelActions";
import ExpandMoreIcon from "#material-ui/icons/ExpandMore";
import AudioPlayer from '../Shared/AudioPlayer'
import LikeTrack from './LikeTrack'
import CreateTrack from './CreateTrack'
import DeleteTrack from './DeleteTrack'
import UpdateTrack from './UpdateTrack'
import { Link } from 'react-router-dom'
const TrackList = ({ classes, tracks }) => (
<List>
{tracks.map( track => (
<ExpansionPanel key={track.id}>
<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
<ListItem primaryTypographyProps={{
variant: "subheading",
color: "primary"
}} className={classes.root}>
<LikeTrack />
<ListItemText primary={track.title} secondary={
<Link className={classes.link} to={`/profile/${track.postedBy.id}`}>
{track.postedBy.username}
</Link>
} />
<AudioPlayer />
</ListItem>
</ExpansionPanelSummary>
<ExpansionPanelDetails className={classes.details}>
<Typography variant="body1">
{track.description}
{track.likes.id} {/* { Value not displayed } */}
</Typography>
</ExpansionPanelDetails>
<ExpansionPanelActions>
<UpdateTrack />
<DeleteTrack />
</ExpansionPanelActions>
</ExpansionPanel>
) )}
</List>
);
const styles = {
root: {
display: "flex",
flexWrap: "wrap"
},
details: {
alignItems: "center"
},
link: {
color: "#424242",
textDecoration: "none",
"&:hover": {
color: "black"
}
}
};
export default withStyles(styles)(TrackList);

Answer 1

Thanks #xadm use of another map() or single track.likes[0].id works!