Bagaimana untuk mendapatkan pembolehubah daripada komponen untuk diletakkan pada App.js-Soal Jawab Rangkaian PHP Cina

Malah mencari di internet saya tidak menemuinya, atau saya tidak memahaminya. Soalan saya: Saya ingin mencari pembolehubah "inputVal" dalam komponen "InputField.js" yang mempunyai "!!DI SINI!!" Tolong saya Terima kasih kerana membaca mesej saya!

export default function InputField() { function handleSubmit(e) { // Prevent the browser from reloading the page e.preventDefault(); // Read the form data const form = e.target; const inputVal = form.myInput.value; console.log(inputVal); } return (    
 ); }

import './App.css'; import AccountNumber from "./components/AccountNumber"; import InputField from "./components/InputField"; import { useEffect, useState } from "react" function App() { //token fetch const [tockens, setTockens] = useState([]) const [loading, setLoading] = useState(false) useEffect(() => { setLoading(true) fetch("https://api.multiversx.com/accounts/!!HERE!!/tokens") .then(response => response.json()) .then(json => setTockens(json)) .finally(() => { setLoading(false) }) console.log(tockens); }, []) function round(nr, ten) { // arondi un chiffre. return Math.round(nr * ten) / ten; } function numberWithSpaces(nr) { // formate un chiffre(x xxx xxx). return nr.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " "); } return (    Total number of accounts
 
 
  {InputField()} 
 {window.inputVal}
 
   {loading ? ( Loading...
 ) : ( <> Tockens
 
 {tockens.map(tocken => (  ))}   Name  Price  Hold  
 
   {tocken.name}
   ${round(tocken.price, 10000000)}
   {round(tocken.balance / Math.pow(10, tocken.decimals), 10000000)}
 ${round(tocken.valueUsd, 10000000)}
  
  )}  
  ); } export default App;

Name	Price	Hold
{tocken.name}	${round(tocken.price, 10000000)}	{round(tocken.balance / Math.pow(10, tocken.decimals), 10000000)} ${round(tocken.valueUsd, 10000000)}

Reaksi saya tidak bagus, saya mencari di internet

export default function InputField({onSubmit}) { function handleSubmit(e) { // Prevent the browser from reloading the page e.preventDefault(); // Read the form data const form = e.target; const inputVal = form.myInput.value; console.log(inputVal); onSubmit(inputVal) } ... }

... const [searchValue, setSearchValue] = useState(null); const handleSearchSubmit = (val) => { setSearchValue(val); } useEffect(() => { setLoading(true) fetch(`https://api.multiversx.com/accounts/${searchValue}/tokens`) .then(response => response.json()) .then(json => setTockens(json)) .finally(() => { setLoading(false) }); console.log(tockens); }, [searchValue]) ...