How to open links in a new browser tab about gatsby-material-starter

[Vagr9K]

Hey there!

Use this code for UserLinks.jsx:

import React, { Component } from "react";
import Button from "react-md/lib/Buttons";
import "./UserLinks.scss";

class UserLinks extends Component {
  getLinkElements() {
    const { userLinks } = this.props.config;
    const { labeled } = this.props;
    return userLinks.map(link =>
      (<Button
        icon={!labeled}
        flat={labeled}
        secondary
        key={link.label}
        iconClassName={link.iconClassName}
        href={link.url}
        target="_blank"
      >
        {labeled ? link.label : ""}
      </Button>)
    );
  }
  render() {
    const { userLinks } = this.props.config;
    if (!userLinks) {
      return null;
    }
    return (
      <div className="user-links">
        {this.getLinkElements()}
      </div>
    );
  }
}

export default UserLinks;

The most important part is setting target="_blank" on a Button:

<Button
        icon={!labeled}
        flat={labeled}
        secondary
        key={link.label}
        iconClassName={link.iconClassName}
        href={link.url}
        target="_blank"
      >
        {labeled ? link.label : ""}
      </Button>

React-MD's Buttons automatically set their component to be a in case of any a related props being set (like href and target).

[cryptosteer]

Awesome! Thank you!