-1

Here's my code:

function Information({
    rating,
    imax,
    audiodescription,
    closedcaptioning,
    releaseyear,
    runtime,
}) {
    const runtimeHours = Math.round(runtime / 60);
    const runtimeMinutes = runtime % 60;
    const ratingImage = '/images/rating-' + { rating } + '.png';
    const ratingAlt = 'rated' + { rating };

    return (
        <Container>
            <img src={ratingImage} alt={ratingAlt} />
            {imax && (
                <img
                    src="/images/icon-imaxenhanced.png"
                    alt="IMAX enhanced"
                    height="20px"
                />
            )}
            {audiodescription && (
                <img src="/images/icon-ad.png" alt="Audio Description" height="20px" />
            )}
            {closedcaptioning && (
                <img src="/images/icon-cc.png" alt="Closed Captioning" height="20px" />
            )}
            {releaseyear} • {runtimeHours && { runtimeHours } + 'h'}
            {runtimeMinutes}m
        </Container>
    );
}

As long as I'm simply spitting out the restructured variable, all is well. That is, imax, audiodescription,closedcaptioning, and releaseyear all work fine. As does runtimeMinutes, oddly. On the other hand, ratingImage, ratingAlt, and runtimeHours are all rendering as objects. I've tried...

    const ratingImage = '/images/rating-' + { JSON.stringify(rating) } + '.png';
    const ratingAlt = 'rated' + { JSON.stringify(rating) };

and

    const ratingImage = '/images/rating-' + { rating.toString() } + '.png';
    const ratingAlt = 'rated' + { rating.toString() };

but both throw errors.

As for runtimeHours, I'm entirely at a loss.

I know there's a simple explanation, but I just can't see it.

Matthew Waldrop
  • 1
  • 2

1 Answers1

0

These lines aren't doing what you expect them to do:

    const ratingImage = '/images/rating-' + { rating } + '.png';
    const ratingAlt = 'rated' + { rating };

If you concatenate a string ('rated') and what resembles an object ({ rating }), an object is coerced to a string: [object Object]. enter image description here

If rating is a string, you can try this (Template literals):

const ratingImage = `/images/rating-${rating}.png`;
const ratingAlt = `rated${rating}`;

enter image description here Note, it's plain JS code, not JSX.

Serhii Holinei
  • 5,758
  • 2
  • 32
  • 46
  • Strictly speaking those first lines are valid JS. They don't do what OP is trying to do, but they're not going to blow up. You'll just end up with `'/images/rating-[object Object].png'`. – ray Dec 10 '21 at 15:34
  • Thanks, @rayhatfield . I update the wording a little bit. – Serhii Holinei Dec 10 '21 at 15:35
  • Thanks! ``` const ratingImage = \`/images/rating-${rating}.png\`; const ratingAlt = \`rated${rating}\`; ``` definitely worked on the rating, but I still can't figure out what's going on with the division issue. – Matthew Waldrop Dec 10 '21 at 16:06
  • @MatthewWaldrop what division issue? Do you mean `runtime / 60` is causing trouble? What is `runtime` in your case? – Serhii Holinei Dec 10 '21 at 16:17
  • Never mind. Same solution. ` {releaseyear} • {runtimeHours && \`${runtimeHours} h\`} {runtimeMinutes}m` – Matthew Waldrop Dec 10 '21 at 16:22
  • Yup, it should work. You should differentiate JS and JSX and everything will be fine. Happy coding! – Serhii Holinei Dec 10 '21 at 16:27
  • `runtime` was the film runtime in minutes. The calculation splits that into hours and minutes for display. I never had any issue with the modulus displaying, but performing the Math.round calculation on the passed variable meant that I had to use the same JSX conversion on it for it to display correctly. I got the same [object Object] response, and when I just wrapped the calculation in parens, I got a NaN result. It's working fine with the solution I commented earlier. – Matthew Waldrop Dec 10 '21 at 16:45