Search code examples
reactjsobjectvariablesconcatenationdestructuring

How do I stringify and "numberify" destructured variables passed to components in React.js

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.

Solution

  • 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.