How can I retrieve stuff from an useState declared variable in a component within another component scope

Question

I want to get the investments variable within the scope of another component...

I have written the code down-bellow which is ok, but how can I get this const investment since I already exported the function InvestmentsList? How can that be done without resorting to useSelector() from react-redux?

import React, { useEffect, useState } from 'react';
import {
  Card,CardBody,CardHeader,CardTitle,Col,Row,Table} from 'reactstrap';
import moment from 'moment';

const InvestmentsList = () => {
  const [investment, setInvestment] = useState([]);
 async function fetchInvestments() {
    const response = await fetch('http://localhost:3000/products');
    const investments = await response.json();
    // waits until the request completes...
    setInvestment(investments);
  }

  useEffect(() => {
    fetchInvestments();
  }, []);

  return (
    <>{/* ...Returns something */}</>)
export default InvestmentsList;

Answer 1

You can't access data of another component.

If two components are not to far from each other, you can also store the data in a parent component and provide "investment" as props to both components.

Also, Redux, React Context API or RecoilJS will allow you to store data of variable "investment" somewhere outside the component.