CODEWITHSUNDEEP
javascriptcssreactjsfirefox
Sathesh S
Sathesh S

Reputation: 1323

Rendering Comma separated links in React with word wrap

I am trying to render links from a list. Everything works fine until my links goes to next line.

const relatedLink = _.map(personList, (person, index) => {
        const comma = index
            ? <span>,&nbsp;</span>
            : null;

        return (
            <span key={"key_" + person.name}
                  className="related-names-link">
            {comma}
                <NameLink
                    personId= {orderIdAndNumber.orderId}
                    key={"person_link_" + person.name}>
                    {person.name}
                </NameLink>
            </span>
        );
    });

    <div className="related-names-links">
         {relatedLink}
    </div>

CSS:

.related-names-links {
        display: flex;
        flex-wrap: wrap;
    }

When the list goes big the comma for the first line last name goes to next line, instead of this I want the comma to stay in first line itself.

Actual Result: 

Jack, Tom, Jerry
, Mickey, Donald, Flintstone

Expected Result:

Jack, Tom, Jerry,
Mickey, Donald, Flintstone

I tried with the answers from Rendering comma separated list of links but still I'm getting the same output.

Upvotes: 1

Views: 460

Answers (1)

buzatto
buzatto

Reputation: 10382

your span content pattern is , <name>, it should be <name>,. move {comma} after NameLink, and for comma validation check if index < personList.length - 1.

Upvotes: 2

Related Questions