Как передать данные из одного компонента React в другой?

Чтобы передать переменную stocksName из компонента App в компонент StocksView, вы можете просто передать ее как свойство.

Другой способ добиться этого — создать глобальное хранилище, что является более продвинутым методом, подходящим для управления большим количеством состояний. Но на данный момент вы можете приступить к разработке концепции реквизита (см. здесь)

Вот как это можно сделать с помощью реквизита.

Приложение.js:

import React, { useState, useEffect } from 'react'
import Select from 'react-dropdown-select';
import axios from 'axios';
import './App.css'
import StocksView from './components/Stocks'

function App() {

  const [data, setData] = useState([]);
  const [stocksName, setStocksName] = useState([]);
  const [selectvalue, setSelectValue] = useState([]);
  const [message, setMessage] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    console.info(selectvalue);
    axios.post("./getStocks", selectvalue)
      .then((response) => {
        console.info(response);
        const nodeData = JSON.parse(response.data.nodeData);
        setStocksName(nodeData.STOCKS_NAME);
      }).catch((error) => {
        console.info(error);
      });
  };

  useEffect(() => {
    fetch("/listPartitions")
      .then((response) => response.json())
      .then((partition) => {
        const parsed = JSON.parse(partition.nodePartition);
        const partitions = Object.entries(parsed).map(([key, value]) => ({
          label: value,
          value: key
        }));

        // put the partitions data in the state
        setData(partitions);
        console.info(parsed, partitions);
      });
  }, []);

  return (
    <div>
      <form onSubmit = {handleSubmit}>
        <Select
          name = "select"
          options = {data}
          multi
          onChange = {(selected) => setSelectValue(selected.map((item) => item.label))
          }
        />
        <button type = "submit">Submit</button>
        <div className = "message">{message ? <p>{message}</p> : null}</div>
      </form>
      <div>
        <StocksView stocksName = {stocksName}/> {/* Passing stocksName as prop */}
      </div>
    </div>
  )
}

export default App;

Stocks.js:

import React from 'react'
import Graph from 'react-vis-network-graph'

export default function StocksView({ stocksName }) { // Accepting stocksName as a prop
    const stocks = {
        nodes: [
            {stocksName}
        ]
    }
    
     return (
    <div className='container'>
        <Graph // I suppose you meant to use Graph here instead of Stocks
            stocks = {stocks}
        />
    </div>
  )
}

Теперь stocksName из компонента App будет передано в компонент StocksView в качестве свойства, и к нему можно будет получить доступ в StocksView как stocksName.

Дайте мне знать, если у вас есть вопросы :(

Вы можете использовать Context.Provider

У меня та же проблема несколько дней назад

Это мне очень помогло https://es.react.dev/reference/react/createContext

С помощью Context вы можете использовать свои переменные во всех ваших компонентах.

Реквизиты — это аргументы, передаваемые в компоненты React. Прочтите это: https://www.w3schools.com/react/react_props.asp