Add link to JSON object in react js

Question

I have JSON data that I fetch from API. Let's say the table is (the below table is just an example):

  Name | Age
   A      20
   B.     25

Now I am fetching the name and age content from an API and displaying it as a table format (I am using React js) Now, I want to make the content of name such as A and B clickable.

When I click the A it should link me to another api url (the problem here is the api url is different for every name object) So, the api for

A = http://example/name?=A 
B = http://example/name?=B

Now, how do I link my name object content (A, B) to API (URL) and make it fetch data and display as table on another page.

So, when I click on A it should send me to another URL and on that web page I should be able to see the fetched data of (that API URL that I just got send to) in the table form.

My code:

     import React, { Component } from "react";

    export default class Stocks extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      isLoaded: false,
      search: "",
    };
  }

  updateSearch(event) {
    this.setState({ search: event.target.value });
  }

  componentDidMount() {
    fetch("http://131.181.190.87:3001/all")
      .then((res) => res.json())
      .then((json) => {
        this.setState({
          isLoaded: true,
          items: json,
        });
      });
  }

  render() {
    let filteredItems = this.state.items.filter((item) => {
      return (
        item.symbol.toUpperCase().indexOf(this.state.search.toUpperCase()) !==
          -1 || item.industry.indexOf(this.state.search) !== -1
      );
    });
    var { isLoaded, items } = this.state;
    if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <div>
          <form className="form-for-table-search">
            SelectSymbol: &emsp;
            <input
              type="text"
              value={this.state.search}
              onChange={this.updateSearch.bind(this)}
            />
            &emsp; &emsp;{" "}
            <button type="button" className="btn-submit">
              Search
            </button>
            <br />
            &emsp; Industry: &emsp; &emsp; &emsp;
            <input
              type="text"
              value={this.state.search}
              onChange={this.updateSearch.bind(this)}
            />
            <button type="button" className="btn-submit">
              Search
            </button>
            &emsp; &emsp; History of Symbol and date : &emsp; &emsp; &emsp;
            <input
              type="text"
              value={this.state.search}
              onChange={this.updateSearch.bind(this)}
            />
            &emsp; &emsp;
            <button type="button" className="btn-submit">
              Search
            </button>
          </form>
          <table border={2} cellPadding={1}>
            <thead>
              <tr>
                <th>Symbol</th>
                <th>Name</th>
                <th>Industry</th>
              </tr>
            </thead>

            <tbody>
              {filteredItems.map((item) => (
                <tr>
                  <td key={item.symbol}>{item.symbol}</td>
                  <td key={item.name}>{item.name}</td>
                  <td key={item.industry}>{item.industry}</td>
                </tr>
              ))}
              }
            </tbody>
          </table>
        </div>
      );
    }
  }
}

Any help is appreciated.

Answer 1

You can dynamically create your click handlers to pass the info you need to create the url for the fetch. Something like this:

handleClick = name => 
    fetch(`http://example.com/name?=${name}`).then((data) => {
        // handle redirect to new page
    })

<td key={item.name} onClick={() => handleClick(item.name)}>{item.name}</td>

I can't give a proper answer for how to redirect to your new page without knowing more about how your app is set up.

If you're using React Router, you could use a Redirect or history to pass the data to your display table component. Alternatively, you could render a Link in the table cell instead, passing the name as a prop to the new page component, and have that component fetch on mount.