Skip to content

LinkContainer should handle null/undefined locations #257

Open
@getaaron

Description

@getaaron

Feature Request

LinkContainer should handle null or undefined locations by rendering the child component without modifications.

Why?

Imagine we have an array of model objects and want to render them as a table or list. However, sometimes only some of them have links associated. We'd like to do something like:

    <ListGroup>
      {steps.map((step) => {
        const shouldShowLink = !!step.link;

        return (
          <LinkContainer
            to={step.link}
            key={step.name}
          >
            <ListGroup.Item
              action={shouldShowLink}
              variant={step.completed ? "success" : null}
              disabled={step.disabled}
              props
            >
              {step.title}
            </ListGroup.Item>
          </LinkContainer>
        );
      })}
    </ListGroup>

In this case, when step.link is missing, we'd still like to render the ListGroup.Item component. However, LinkContainer complains that location is null and/or undefined, depending on what's passed in.

Possible Implementation

Haven't tested this, but I think it might be as simple as:

    // …snip…
     } = this.props;
+   
+   if (!to) {
+     return React.Children.only(children);
+   }
+   
     const href = history.createHref(
       typeof to === 'string' ? { pathname: to } : to
    // …snip…

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions