0
I’m trying to show the attributes of the music object inside a component but it only renders the list but not the attributes of the object I passed. What I’m doing wrong?
Objeto Musica:
function Music (banda, url, musica) {
this.banda = banda;
this.url = url;
this.musica = musica;
}
Component to show the music:
class Musica extends React.Component {
render() {
return (
<li>
<strong>{this.props.banda} </strong>
<a href={this.props.url} target="_blank"> {this.props.musica} </a>
</li>
)
}
}
Component to assemble the playlist:
const music1 = new Music("Foster the people", "https://www.youtube.com/watch?v=_GMQLjzVGfw", "Houdini")
const music2 = new Music("The Strokes", "https://www.youtube.com/watch?v=pT68FS3YbQ4", "You Only Live Once")
class Musicas extends React.Component {
render () {
return (
<div>
<ul>
<Musica props={music1}/>
<Musica props={music2}/>
</ul>
</div>
);
}
}
In the Music component, try using the Perator spread to pass the props, it would look like "{...music1}", so you will have access to each property individually. The way it is today, you will probably only be able to access the property this way: "{this.props.music1.banda}" and so on. If you use the spread Operator to pass the props, there will be no need to change the code.
– lvr7