'useState' value is empty - reactjs

Question

I'm trying to fetch data from an API based on the year parameter with the initial year set to 2020. The components are on the same .jsx page and exported to App.js. When I try to log "search" it returns an empty object.
export default function Rank() {
const [ search, setSearch ] = useState(2020)
console.log(search)
return (
<main>
<div>
<SearchBar onSubmit={setSearch} />
</div>
<div>
<FetchTable />
</div>
</main>
);
}
I've removed some unrelated code in the FetchTable function but basically, it should return a table with data of the selected year.
function FetchTable(search) {
console.log(search)
useEffect(() => {
fetch(`exampleapiurl?year=${search}`)
function SearchBar(props) {
const [ innerSearch, setInnerSearch ] = useState();
return (
<div>
<input
aria-labelledby="search-button"
name="search"
id="search"
type="search"
value={innerSearch}
onChange={(e) => setInnerSearch(e.target.value)}
/>
<button
id="search-button"
type="button"
onClick={() => props.onSubmit(innerSearch)}
>
Search
</button>
</div>
)
}
Any help greatly appreciated.

Answer 1

You need to pass the search parameter to the FetchTable, and get it from the props. See comments in code.
const { useState, useEffect } = React
function Rank() {
const [search, setSearch] = useState(2020)
return (
<main>
<div>
<SearchBar onSubmit={setSearch} />
</div>
<div>
{/* pass search to FetchTable */}
<FetchTable search={search} />
</div>
</main>
)
}
function FetchTable({ search }) { // get search from the props
useEffect(() => {
// fetch(`exampleapiurl?year=${search}`)
console.log(search)
}, [search]) // useEffect should depend on search
return (
<div>{search}</div>
)
}
function SearchBar({ onSubmit }) {
const [innerSearch, setInnerSearch] = useState(''); // set an initial value to the state, so the input would be controlled
return (
<div>
<input
aria-labelledby="search-button"
name="search"
id="search"
type="text"
value={innerSearch}
onChange={(e) => setInnerSearch(e.target.value)}
/>
<button
id="search-button"
type="button"
onClick={() => onSubmit(innerSearch)}
>
Search
</button>
</div>
)
}
ReactDOM.render(
<Rank />,
root
)
<script crossorigin src="https://unpkg.com/react#17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#17/umd/react-dom.development.js"></script>
<div id="root"></div>