Q:

How to handle the case of no link returned to the to attribute of Link component using react?

Hi I am new to programming. I want to return no link for the default case in switch statement below,
class ParentComponent extends React.PureComponent {
    get_link = () => {
        const item = this.props.item;
        let link;
        switch (item.type) {
            case 'type_1':
                link = this.get_type1_link();
                break;
            default:
                link = '/'; //here i want to return no link
        }
        return link;
    };

    get_type1_link = () => {
        const item= this.props.item;
        const item_data = this.props.item_data;
        const {item_id} = item_data.attributes;
        const filtered_item_data = item_data && item_data.find(item_data 
        => 
            item.id === item_id);
            if (filtered_item_data) {
                return `/viewer/${item_data_id}`;
            } else {
                return '/';
            }
    };

    render = () => {
        const item = this.props.item;
        return (
            <ListItem
                key={item.id}
                link={this.get_link}
                text={this.get_content}/>
        );
    }
}

class ListItem extends React.PureComponent {
    render = () => {
        return (
            <Link to={props.link()}>
                <li>
                    <div className="text">
                        {props.text}
                    </div>
                </li>
            </Link>
       );
    };
}

Here in the ListItem component it has each li item with a link so if the user clicks the li item then it navigates the page to the link received from props.link callback function. 
From the props.link there might be no link returned too. How can i handle this case for Link component where no url returned?
Could someone help me with this. thanks.

A:

You could change your ListItem to only render Link when you have a valid link. Something like:
class ListItem extends React.PureComponent {
  render = () => {
    const link = props.link();
    if (link) {
      // link is valid
      return (
        <Link to={link}>
          <li>
            <div className="text">
              {props.text}
            </div>
          </li>
        </Link>
      );
    } 
    return (
      // no valid link returned
      <div>
        <li>
          <div className="text">
            {props.text}
          </div>
        </li>
      </div>
    );
  };
}

and change the default case of get_link function to:
default:
  link = null;

Additionally, you should render <li>s tags within a <ul>

