How to get variables from component to put on App.js

Question

Even after searching on the Internet I couldn't find it, or I didn't understand it. My question: I want to find the "inputVal" variable in the "InputField.js" component which has "!!HERE!!" in the "App.js" component (while getting) Please help me Thank you for reading my message!

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 (
    <form method="post" onSubmit={handleSubmit}>
      <input name="myInput" id="adress-field" placeholder="Enter adress" autoComplete="on" />
      <button type="submit" id="adress-button">Send</button>
    </form>
  );
}

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 (
    <content className="content">
        <div className="up-side">
            <div className="account-number-box">
                <p id="p-account-number">Total number of accounts</p>
                <p id="account-number"><AccountNumber/></p>
            </div>
            <div className="adress-search">
                {InputField()}
            </div>
            <p>{window.inputVal}</p>
        </div>
        <div className="down-side">
            <table className="Token-section-output">
            

              {loading ? (
                <div>Loading...</div>
              ) : (
                <>
                  <h1>Tockens</h1>
                  <table className='Token-section-output' border={0}>
                    <tr className='token-row-type'>
                      <th className='token-column'>Name</th>
                      <th className='center-column'>Price</th>
                      <th>Hold</th>
                    </tr>
                    <tr className="space20"/>

                    
                    {tockens.map(tocken => (
                      <tr className='token-row' key={tocken.id}>
                        <td className='token-column'>
                        <img className="img-Tockens" src = {tocken?.assets?.pngUrl ?? "img/Question.png"} /> 
                          <p>{tocken.name}</p> 
                        </td>

                        <td className='center-column'> <p>${round(tocken.price, 10000000)}</p> </td>

                        <td> 
                          <p>{round(tocken.balance / Math.pow(10, tocken.decimals), 10000000)}</p> 
                          <p className='token-hold'>${round(tocken.valueUsd, 10000000)}</p>
                        </td>
                      </tr>
                    ))}

                  </table>
                </>
              )}


            </table>
        </div>   
    </content>
  );
}

export default App;

My reaction was not good, I searched on the internet

Answer 1

You want to extend your InputField component to accept a callback function that can be passed by your app:

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)
  }

  ...
}

In your application, you need to pass this callback to your component:

<div className="adress-search">
  <InputField onSubmit={handleSearchSubmit} />
</div>

Note: Components will not be consumed by calling like functions.

In your application logic you need another state to hold your search value:

...
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])
...