title: How can I access a functional components state outside the component? - React
body: <p>For example, if I have the functional component Dropdown that receives data from an api to populate a dropdown selection, and uses the following hook to update the state of the value selected</p>
  <pre><code>const [value, setValue] = React.useState();
  </code></pre>
  <p>How might I then access/read the value (in this case an array of numbers) outside of the Dropdown component?</p>
  <p>For better context I will include firstly where the Dropdown component is used:</p>
  <pre><code>import React from 'react';
  import Dropdown from '../Components/Dropdown.js'
  import GraphTypeDropdown from '../Components/GraphTypeDropdown.js'
  
  function CreateGraph() {
  
      //function receiving and returning data (array of data points and their heading) from api
  
      async function getData() {
          const response = await fetch('/dropdowndata');
          const receivedData = await response.json();
          return receivedData;
      }
  
      //assigning data to myData variable
  
      const myData = getData();
  
      //myData is passed to Dropdown components as a prop to allow selection of data columns
      //GraphTypeDropdown allows selection of the graph &quot;type&quot;
  
      return (
          &lt;div&gt;
              &lt;Dropdown myData={myData} /&gt;
              &lt;Dropdown myData={myData} /&gt;
              &lt;Dropdown myData={myData} /&gt;
              &lt;Dropdown myData={myData} /&gt;
              &lt;Dropdown myData={myData} /&gt;
              &lt;GraphTypeDropdown /&gt;
          &lt;/div&gt;
      )
  }
  
  export default CreateGraph;
  </code></pre>
  <p>And also the full code of the dropdown functional component</p>
  <pre><code>import React from 'react';
  import './Dropdown.css';
  
  function Dropdown(props) {
      const [columns, setColumns] = React.useState([]);
      const [value, setValue] = React.useState();
  
      //maps the prop myData to be the label and value of the dropdown list
  
      React.useEffect(() =&gt; {
          async function getColumns() {
              props.myData.then(function(result) {
                  setColumns(result.map(({ heading, values }) =&gt; ({ label: heading, value: values })));
              });
          }
          getColumns();
      }, [props.myData]);
  
      //creates a dropdown where value (array of data points) can be selected with label (column headings)
      //value selected is then saved in the state of the dropdown
  
      return (
          &lt;select className='DropDown'
              value={value}
              onChange={(e) =&gt; setValue(e.currentTarget.value)}
          &gt;
              {columns.map(({ label, heading, value }) =&gt; (
                  &lt;option className='DropDown'
                      key={heading}
                      value={value}
                  &gt;
                      {label}
                   &lt;/option&gt;
              ))}
          &lt;/select&gt;
      );
  }
  
  export default Dropdown;
  </code></pre>
  <p>How will I be able to use/access the arrays assigned to value in the five Dropdown components?</p>