We have this react components below and we are tyring to start streaming a song from soundcloud when an image is clicked. But All songs play at the same time all together when songs are listed.. any advice appreciated..
var DisplayTable = React.createClass({
playTrack: function(track) {
console.log('track info: >>>>>>>>>> ',track);
SC.stream('/tracks/'+track.id, function(stream){
stream.play();
});
},
render:function(){
//making the rows to display
var rows=[];
var context = this;
this.props.data.forEach(function(track) {
// rows.push(<tr><td>{track.title}</td><td>{track.permalink_url}</td></tr>)
rows.push(<tr><td>{track.title}</td><td><img onClick={ context.playTrack(track) } className="images" src={track.artwork_url}/></td></tr>)
});
//returning the table
return(
<table>
<thead>
<tr>
<th className="table-head">Title</th>
<th className="table-head">Album Art</th>
</tr>
</thead>
<tbody>{rows}</tbody>
</table>
);
}
});
you should make a child component for this that has its own onClick for every row. currently you are calling the same function for every row and calling them all at the same time when its rendered.
var TableRows = React.createClass({
render: function(){
var track = this.props.track;
return (
<tr ref="trackRow">
<td>{track.title}</td>
<td><img onClick={ this.playTrack } className="images" src={track.artwork_url}/></td>
</tr>
);
},
playTrack: function(){
// use the track in your props aka... this.props.track
}
});
and then change your foreach to map and do this
this.props.data.map(function(track, i) {
rows.push(<TableRows track={track} key={i} />);
});
NOTE: this is cleanup on your rendering of rows... if you notice you are calling the playTrack function as you render it... onClick={context.playTrack(track)}that is actually calling the function then and there.. so you want to not call it with the parenthesis and use a component for each row so you can access the track in the props.