I am using React js. I have a class Stock.js where I am fetching an api and displaying the data on the webpage 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 wanna 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-murugan`said in the answers, it says undefined, so I have uploaded the screenshot

[![enter image description here](https://i.stack.imgur.com/8GUCt.png)](https://i.stack.imgur.com/8GUCt.png)

[![enter image description here](https://i.stack.imgur.com/YpGk0.png)](https://i.stack.imgur.com/YpGk0.png)