How to pass an object inside a props?

Question

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>   
        );
    }

}

Answer 1

In the component Musicas, you must define another key that does not props or do the spread of all object properties Music.

I leave below two possible alternatives. Choose the one that seems simpler. :)

Alternative 1: Passing a prop music:

An alternative is to do so:

class Musicas extends React.Component {
  render() {
    return (
      <div>
        <ul>
          <Musica music={music1} />
          <Musica music={music2} />
        </ul>
      </div>
    );
  }
}

And in the component Musica:

class Musica extends React.Component {
  render() {
    const { banda, url, musica } = this.props.music;

    return (
      <li>
        <strong>{banda} </strong>
        <a href={url} target="_blank">
          {musica}
        </a>
      </li>
    );
  }
}

Alternative 2: Doing the spread of the properties of the object Music

You can use the Operator spread (...) to pass all properties of the object Music for the component Musica:

class Musicas extends React.Component {
  render() {
    return (
      <div>
        <ul>
          <Musica {...music1} />
          <Musica {...music2} />
        </ul>
      </div>
    );
  }
}

And in the component Musica, just do it the way you used it before:

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>
    );
  }
}

Recommended reading:

• Components and Props (React Official Documentation);
• Operator spread (...).

Answer 2

The error is in the "object" Music, in fact you have not created an object, but rather a function that is not returning anything.

The right thing would be:

function music (banda, url, musica) { return { banda: banda, url: url, musica: musica } }

To create one of the constants would be:

const music1 = music("Foster the people", "https://www.youtube.com/watch?v=_GMQLjzVGfw", "Houdini");

And to pass:

<Musica {...music1} />