Conditional Rendering of div in ReactJS?

Question

I'm a newbie to ReactJS. I want to insert a condition in my code below so that when noPeopleText.length > 0, then only should the "no-people-row" div render, otherwise, I do not want this div rendering to the DOM if noPeopleText is an empty string or undefined.

What's the best way do add in a conditional for this?

const peopleMember = (props) => {
    const { people, noPeopleText, title } = props;
    const hasPeople = Boolean(people && people.length);
    const peopleGroup = _.groupBy(people, (person, i) =>
        Math.floor(i / 2)
    );

    return (
    <div>
        { hasPeople &&
            <SectionHeader
                title={title}
            />
        }
        { (hasPeople || noPeopleText) &&
        <div className="c-team-members">
            <div className="container">
                { hasPeople ? _.map(peopleMemberGroups, (members, i) => (
                    <div className="row" key={i}>
                        {members && members.map((member, j) => (
                                <TeamMember
                                    key={j}
                                    name={member.name}
                                />
                            ))
                        }
                    </div>
                )) : //If noPeopleText.length > 0, render div below
                    <div className="row no-people-row">
                        <div className="col-xs-12" dangerouslySetInnerHTML={{__html: noPeopleText}} />
                    </div>
                }
            </div>
        </div>
        }
    </div>

    );
};

Martin Mihaylov · Accepted Answer · 2017-04-03 21:27:38Z

You already have conditional rendering in your code. For example:

{ hasPeople &&
    <SectionHeader title={title} />
}

This will only render the component SectionHeader if hasPeople evaluates to true. If hasPeople evaluates to false then the whole expression would evaluate to false regardless of the second part of the &&. Thus it is never executed (rendered).

So do you want something like this?

const peopleMember = (props) => {
    const { people, noPeopleText, title } = props;
    const hasPeople = Boolean(people && people.length);
    const peopleGroup = _.groupBy(people, (person, i) =>
        Math.floor(i / 2)
    );

    return (
    <div>
        { hasPeople &&
            <SectionHeader
                title={title}
            />
        }
        { (hasPeople || noPeopleText) &&
        <div className="c-team-members">
            <div className="container">
                { hasPeople ? _.map(peopleMemberGroups, (members, i) => (
                    <div className="row" key={i}>
                        {members && members.map((member, j) => (
                                <TeamMember
                                    key={j}
                                    name={member.name}
                                />
                            ))
                        }
                    </div>
                )) : (noPeopleText.length > 0) &&
                    <div className="row no-people-row">
                        <div className="col-xs-12" dangerouslySetInnerHTML={{__html: noPeopleText}} />
                    </div>
                }
            </div>
        </div>
        }
    </div>

    );
};

BenWurth · Accepted Answer · 2017-04-03 21:39:00Z

1

I think you can just use a nested ternary operator:

{ hasPeople
    ? //mapping
    : noPeopleText.length > 0
        ? <div className="row no-people-row">
            <div className="col-xs-12" dangerouslySetInnerHTML={{__html: noPeopleText}} />
          </div>
        : null
}

answered Apr 3, 2017 at 21:39

BenWurth

8001 gold badge7 silver badges23 bronze badges

Collectives™ on Stack Overflow

Conditional Rendering of div in ReactJS?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related