Conditional rendering in React component

Question

I'm trying to implement conditional rendering in a React component. If a specific value in the fetched data is not null, then the content should be rendered. Else, a pre-defined text will appear in the <p> element.

Note that the image property from the fetched data is appearing correctly. So the data is getting fetched. The data.subscriptions_url is null (I can see that in my JSON api), however, the ternary operator stops as if the condition is true instead of displaying my predefined text.

Any help?

Here's my code:

import React, { Component } from 'react';

class Card extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        let data = this.props.data;

        const userBio = data.subscriptions_url !== null ? (
            <div className="user-info--bio">
                <i className="" />
                <p>{data.subscriptions_url}</p>
            </div>
        ) : (
            <div className="user-info--bio">
                <i className="" />
                <p>This user prefers not to share their subscriptions.</p>
            </div>
        );

        return (
            <main className="main-card">
                <div className="main-card--header-bg"></div>

                <div className="main-card--user-info">
                    <div className="main-card--img-container">
                        <img src={data.avatar} />
                    </div>

                    <div className="user-info--name">
                        <i className="" />
                        <p>{data.name}</p>
                    </div>

                    {userBio}

                </div>
            </main>
        );
    }
}

export default Card;

score 1 · Accepted Answer · answered Apr 01 '18 at 15:53

Try this check for null:

const userBio = data.subscriptions_url ? (
            <div className="user-info--bio">
                <i className="" />
                <p>{data.subscriptions_url}</p>
            </div>
        ) : (
            <div className="user-info--bio">
                <i className="" />
                <p>This user prefers not to share their subscriptions.</p>
            </div>
        );

See this as explanation: How do I check for null values in JavaScript?

Nailed it! Accepting this as an answer in approx. 6 minutes! — , Apr 01 '18 at 15:54

Conditional rendering in React component

1 Answers1