Save clicked on link as query to search for API (React, Gatsby)

Question

I am using Gatsby and a stock market API to make a stock portfolio application. currently, I have it set up so that when you search for a stock by its ticker symbol, it returns the stock ticker-symbol, market cap, and previous close. I also made it so that when you click the ticker-symbol it takes you to another Gatsby page. On this next page, I want it to bring you to a table with more data about the stock.

The functionality I need is to search for the ticker symbol clicked on in the new tab, so that I can set up a more detailed table.

index.js

import React from "react"
import { Link } from "gatsby"
import axios from "axios"
import "../css/style.css"
import Layout from "../components/layout"

export default class index extends React.Component {
  state = {
      companyName: "",
      previousClose: "",
      marketCap: "",
      change: "",
      symbol: ""

  }


  componentDidMount() {
    const API_KEY = '************************';
    axios.get(`https://cloud.iexapis.com/stable/stock/XOM/quote?token=${API_KEY}`)
      .then(res => {
        const symbol = res.data['symbol'];
        this.setState({ symbol })

        const previousClose = res.data['previousClose'];
        this.setState({ previousClose })

        const marketCap = res.data['marketCap'];
        this.setState({ marketCap })
      })
  }

  clickHandler = (event) => {
          if (event.keyCode === 13) {
          const query = event.target.value;
          const API_KEY = '**********************';
      axios.get(`https://cloud.iexapis.com/stable/stock/${query}/quote?token=${API_KEY}`)
          .then(res => {
              const companyName = res.data['companyName'];
              this.setState({ companyName })

              const previousClose = res.data['previousClose'];
              this.setState({ previousClose })

              const marketCap = res.data['marketCap'];
              this.setState({ marketCap })

              const change = res.data['change'];
              this.setState({ change })

              const symbol = res.data['symbol'];
              this.setState({ symbol })
          })
      }
  }



  render() {
      return (
          <Layout>
              <div class = "main-div">
                  <input type="search" class="main-search" onKeyDown={event => this.clickHandler(event)}/>
                  <table>
                    <tr>
                      <th>Ticker-Symbol</th>
                      <th>Market Cap</th>
                      <th>Previous Close</th>
                    </tr>
                    <tr>
                      <td><Link to="/details">{this.state.symbol}</Link></td>
                      <td>{this.state.marketCap}</td>
                      <td>{this.state.previousClose}</td>
                    </tr>
                  </table>
              </div>
          </Layout>
      )
  }
}

details.js

import React from 'react'
import Layout from '../components/layout'

export default function details() {
    return (
        <Layout>
        <div>

        </div>
        </Layout>
    )
}

Answer 1

You can pass data through <Link> component using a state object, as is shown in Gatsby' Link API documentation:

<td><Link to="/details" state=={{someState:'hello'}}>{this.state.symbol}</Link</td>

Then, in your details.js you will receive as a prop(stored in location.state.someState) the following:

export default function details() {
    useEffect(()=>{
        if(location.state.someState){
            //your axios async query
        }
    })
    return (
        <Layout>
        <div>

        </div>
        </Layout>
    )
}