The code in the sandbox actually works (for me anyway), but is misleading because the line drawn is nowhere near the viewport.

A couple of things to note are that coordinates are an array given in [long, lat] which may not be what most people would assume. For example, if you cut and paste [lat,long] from google maps for San Fransisco, you get [37.77909036739809, -122.41510269913951]. Then you'll have to reverse those and put them in:

const dataOne = {
    type: "Feature",
    properties: {},
    geometry: {
        type: "LineString",
        coordinates: [
            [-122.41510269913951, 37.77909036739809],
            [39.5423, -77.0564]
        ]
    }
};

Also, the sample code has some cruft in it. Edit the variable dataOne not the other unused place.

Now you'll see a line from San Fransisco to some random spot in the middle of Antarctica that was really easy to miss.

Just in case the link goes bad, the full code is:

import React, { Component } from "react";
import { render } from "react-dom";
import ReactMapGL, { Source, Layer } from "react-map-gl";
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      viewport: {
        latitude: 38.63738602787579,
        longitude: -121.23576311149986,
        zoom: 6.8,
        bearing: 0,
        pitch: 0,
        dragPan: true,
        width: 600,
        height: 600
      }
    };
  }

  render() {
    const { viewport } = this.state;
    const MAPBOX_TOKEN =
      "pk.eyJ1Ijoic21peWFrYXdhIiwiYSI6ImNqcGM0d3U4bTB6dWwzcW04ZHRsbHl0ZWoifQ.X9cvdajtPbs9JDMG-CMDsA";


    const dataOne = {
      type: "Feature",
      properties: {},
      geometry: {
        type: "LineString",
        coordinates: [
          [-122.41510269913951, 37.77909036739809],
          [39.5423, -77.0564]
        ]
      }
    };
    return (
      <ReactMapGL
        {...viewport}
        mapboxApiAccessToken={MAPBOX_TOKEN}
        onViewportChange={(newViewport) => {
          this.setState({ viewport: newViewport });
        }}
      >
        <Source id="polylineLayer" type="geojson" data={dataOne}>
          <Layer
            id="lineLayer"
            type="line"
            source="my-data"
            layout={{
              "line-join": "round",
              "line-cap": "round"
            }}
            paint={{
              "line-color": "rgba(3, 170, 238, 0.5)",
              "line-width": 5
            }}
          />
        </Source>
      </ReactMapGL>
    );
  }
}

render(<App />, document.getElementById("root"));