ITML <Error>: Invariant Violation: processUpdates(): Unable to find child 0 of element.
This probably means the DOM was unexpectedly mutated (e.g., by the browser),
usually due to forgetting a <tbody> when using tables, nesting tags like <form>,
<p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the
child nodes of the element with React ID `.1ljayehovsw.1.0.0.1`.
var React = require('react');
var TVML = require('react-tvml');
var ArtistAlbumListItem = React.createClass({
render: function() {
return (
<lockup>
<img src={this.props.album.cover} width="256" height="256" />
<title>{this.props.album.name}</title>
</lockup>
);
}
});
var ArtistAlbumList = React.createClass({
render: function() {
var albums = this.props.albums.map(function(album) {
return (
<ArtistAlbumListItem key={album.id} album={album} />
);
});
return (
<grid>
<section>
{albums}
</section>
</grid>
);
}
});
var ArtistView = React.createClass({
getInitialState: function() {
return {
albums: []
}
},
componentDidMount: function() {
var self = this;
var artistId = self.props.id;
var url = 'https://api.spotify.com/v1/artists/' + artistId + '/albums';
console.log('I want to load JSON.');
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function() {
if (xhr.status === 200 && xhr.readyState === 4) {
var json = JSON.parse(xhr.responseText);
var jsonAlbums = [];
for (var i = 0; i < json.items.length; i++) {
var jsonAlbum = json.items[i];
jsonAlbums.push({
name: jsonAlbum.name + "",
cover: jsonAlbum.images[0].url + ""
});
}
if (self.isMounted()) {
self.setState({
albums: jsonAlbums
});
}
}
};
xhr.send();
},
render: function() {
return (
<catalogTemplate>
<banner>
<title>CHVRCHES</title>
</banner>
<list>
<section>
<listItemLockup>
<title>Albums</title>
<relatedContent>
{this.state.albums.length > 0 ? <ArtistAlbumList albums={this.state.albums} /> : <activityIndicator><title>Loading</title></activityIndicator>}
</relatedContent>
</listItemLockup>
</section>
</list>
</catalogTemplate>
);
}
});
TVML.render(<ArtistView id="3CjlHNtplJyTf9npxaPl5w" />);