CODEWITHSUNDEEP
javascriptreactjs
Irmantas Želionis
Irmantas Želionis

Reputation: 2324

Sending svg as a prop gets rendered as [object Object]

I am trying to send an SVG image as a field in an object. Using an object as a prop.

Creating array of object: 

import eagles from './logo.svg'
import packers from './packers.svg'
import panthers from './panthers.svg'
import seahawks from './seahawks.svg'

games : [{"id" : 1, "team1" : "Eagles", "team2" : "Packers ", "logo1" : {eagles}, "logo2" : {packers}},
      {"id" : 2, "team1" : "Panthers", "team2" : "Seahawks", "logo1" : {panthers}, "logo2" : {seahawks}}],

Here it is how I am rendering it:

const Game = (game) =>

  <div className="col-sm-6 col-md-3 text-center">
    <table className="table">
    <tbody>
      <tr>
        <th scope="row"><img src={game.game.logo1} alt="" border="3" height="75" width="75" /></th>
        <td>{game.game.team1}</td>
      </tr>
      <tr>
        <th scope="row"><img src={game.game.logo2} alt="" border="3" height="75" width="75" /></th>
        <td>{game.game.team2}</td>
      </tr>
    </tbody>
    </table>
  </div>

However, it gets rendered as:

<img width="75" height="75" alt="" src="[object Object]" border="3">

What is wrong here?

Upvotes: 2

Views: 1863

Answers (2)

Dhananjai Pai
Dhananjai Pai

Reputation: 6005

You're wrapping your svg variables in an object. Remove the {} before the svgs in the games array:

games: [
  {
    id: 1,
    team1: "Eagles",
    team2: "Packers",
    logo1: eagles,
    logo2: packers,
  },
  {
    id: 2,
    team1: "Panthers",
    team2: "Seahawks",
    logo1: panthers,
    logo2: seahawks
  }
];

Upvotes: 3

Diamond
Diamond

Reputation: 3438

{eagles} will convert into Object {eagles: eagles}.

Just remove { and }.

import eagles from './logo.svg'
import packers from './packers.svg'
import panthers from './panthers.svg'
import seahawks from './seahawks.svg'

games : [{"id" : 1, "team1" : "Eagles", "team2" : "Packers ", "logo1" : eagles, "logo2" : packers},
      {"id" : 2, "team1" : "Panthers", "team2" : "Seahawks", "logo1" : panthers, "logo2" : seahawks}]

Upvotes: 0

Related Questions