javascriptreactjsjsonfetch-apisend

How to pass JSON data object {items.symbol} value to another class


I am using React js. I have a class Stock.js where I am fetching an API and displaying the data on the web page in the form of table. When I click on the table data (table data are links) It sends the item.symbol to onhandleclick() method. For example:

Symbol Age
X 20
Y 22

So the values in symbol table are referred as item.symbol Here if I click on X it sends the value X to onhandleclick() and now I want to send this value X or Y whichever user clicks on to another class. By another class I mean let's say I have a class xyz.js I want to send the value of item.symbol to class xyz.js so I can use this value and do whatever I want with that value in my xyz.js class. Is there a way to do it?

My code: (Stock.js)

import React, { Component } from "react";
import { Link } from "react-router-dom";
import Symbols from "./Symbols";

export default class Stocks extends Component {
  

  constructor(props) {
    super(props);
    this.state = {
      items: [],
      isLoaded: false,
     symbolsname: "",
    };
  }


  handleClick(symbol) {
      //pass the value to another class here
  }

  componentDidMount(symbol) {
    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>
          
          <table border={2} cellPadding={1}>
            <thead>
              <tr>
                <th>Symbol</th>
                <th>Name</th>
                <th>Industry</th>
              </tr>
            </thead>

            <tbody>
              {filteredItems.map((item) => (
                <tr>
                  <Link to="/symbols">
                    <td
                      key={item.symbol}
                      onClick={() => this.onhandleclick(item.symbol)} //here I am passing the value of item.symbol to onhandleclick()
                    >
                      {item.symbol}
                    </td>
                  </Link>

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

After doing what maniraj-murugansaid in the answers, it says undefined, so I have uploaded the screenshot

enter image description here

enter image description here


Solution

  • You could redirect to symbol.js using history.push with click event handler like, (Remove Link tag here) So change,

        <Link to="/symbols">
          <td key={item.symbol} onClick={() => this.onhandleclick(item.symbol)} //here I am passing the value of item.symbol to onhandleclick()>
                {item.symbol}
          </td>
       </Link>
    

    to,

    <td key={0} onClick={() => this.onhandleclick(item.symbol)} 
    style={{ cursor: "pointer", color: "blue" }}
     >
       {item.symbol}
    </td>
    

    And onHandleClick function like,

    onhandleclick(data) {
        const { history } = this.props;
        history.push({
          pathname: "/Symbol",
          symbol: data
        });
      }
    

    Here the second property is props that you can pass which is symbol in your case so you can give it like, symbol: data ..

    Working Sandbox: https://codesandbox.io/s/react-router-v4-withrouter-demo-2luvr

    Update: -> After the update from OP , there are some changes that have been made.

    => import { BrowserRouter } from "react-router-dom"; in the main component index.js where you are initializing the parent component in the call to ReactDOM.render .

    index.js:

    import React from "react";
    import ReactDOM from "react-dom";
    
    import App from "./App";
    import { BrowserRouter } from "react-router-dom";
    
    const rootElement = document.getElementById("root");
    ReactDOM.render(
      <BrowserRouter>
        <App />
      </BrowserRouter>,
      rootElement
    );
    

    stocks.js:

    import React, { Component } from "react";
    import { Link } from "react-router-dom";
    import Symbols from "./Symbols";
    
    const filteredItems = [
      { symbol: "X", name: "item1", industry: "industry1" },
      { symbol: "Y", name: "item2", industry: "industry2" }
    ];
    
    export default class Stocks extends Component {
      constructor(props) {
        super(props);
        this.state = {
          items: [],
          isLoaded: false,
          search: "",
          symbol: ""
        };
      }
    
      updateSearch(event) {
        this.setState({ search: event.target.value });
      }
    
      onhandleclick(data) {
        const { history } = this.props;
        history.push({
          pathname: "/Symbols",
          symbol: data
        });
      }
    
      componentDidMount() {}
    
      render() {
        return (
          <div>
            <form className="form-for-table-search">
              Search symbol or industry: &emsp;
              <input
                type="text"
                value={this.state.search}
                onChange={this.updateSearch.bind(this)}
              />
              &emsp; &emsp;{" "}
              <button type="button" className="btn-submit">
                Search
              </button>
              <br />
            </form>
            <table border={2} cellPadding={1}>
              <thead>
                <tr>
                  <th>Symbol</th>
                  <th>Name</th>
                  <th>Industry</th>
                </tr>
              </thead>
    
              <tbody>
                {filteredItems.map((item, index) => (
                  <tr key={index}>
                    <td
                      key={0}
                      onClick={() => this.onhandleclick(item.symbol)} //here I am passing the value of item.symbol to onhandleclick()
                      style={{ cursor: "pointer", color: "blue" }}
                    >
                      {item.symbol}
                    </td>
    
                    <td key={item.name}>{item.name}</td>
                    <td key={item.industry}>{item.industry}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        );
      }
    }
    

    Symbols.js:

    import React from "react";
    
    export default class Symbol extends React.Component {
      componentDidMount() {
        console.log("came here", this.props.location.symbol);
      }
    
      render() {
        return <div>Symbol value: {this.props.location.symbol}</div>;
      }
    }
    

    Updated Sandbox