Rendering content in react js on submit button - reactjs

Question

I'm fetching content from external api using axios and react hooks.
Currently, I'm rendering {renderedResults} without any button. But I want to add submit button and then only render the results when someone clicks on it.
How to implement it in this scenario?
I tried official doc..but no success...
import React, { useEffect, useState } from "react";
import axios from "axios";
import "./Search.css";
const Search = () => {
const [vpincode, setvPincode] = useState("");
const [vdate, setvDate] = useState("");
const [results, setResults] = useState([]);
useEffect(() => {
const search = async () => {
const { data } = await axios.get("https://api", {
params: {
pincode: vpincode,
date: vdate,
},
});
setResults(data.sessions);
};
search();
}, [vpincode, vdate]);
const renderedResults = results.map((result) => {
return (
<div>
{result.name}
{result.address}
</div>
);
});
return (
<div className="container">
<div className="w-25 mb-3">
<label className="form-label ">Enter Pincode:</label>
<input
value={vpincode}
type="text"
className="form-control"
placeholder="Pincode"
onChange={(e) => setvPincode(e.target.value)}
></input>
</div>
<div className="w-25 mb-3">
<label className="form-label">Date:</label>
<input
value={vdate}
type="text"
className="form-control"
placeholder="Date"
onChange={(e) => setvDate(e.target.value)}
></input>
</div>
{renderedResults}
</div>
);
};
export default Search;

Answer 1

Code not tested, but you can do something like this...
import React, { useEffect, useState } from "react";
import axios from "axios";
import "./Search.css";
const Search = () => {
const [vpincode, setvPincode] = useState("");
const [vdate, setvDate] = useState("");
const [results, setResults] = useState([]);
const fetchApiContent = async (_) => {
const { data } = await axios.get("https://api", {
params: {
pincode: vpincode,
date: vdate,
},
});
setResults(data.sessions);
}
const renderedResults = results.map((result) => {
return (
<div>
{result.name}
{result.address}
</div>
);
});
return (
<div className="container">
<div className="w-25 mb-3">
<label className="form-label ">Enter Pincode:</label>
<input
value={vpincode}
type="text"
className="form-control"
placeholder="Pincode"
onChange={(e) => setvPincode(e.target.value)}
></input>
</div>
<div className="w-25 mb-3">
<label className="form-label">Date:</label>
<input
value={vdate}
type="text"
className="form-control"
placeholder="Date"
onChange={(e) => setvDate(e.target.value)}
></input>
</div>
{renderedResults}
<button onClick={fetchApiContent}>Fetch API Content</button>
</div>
);
};
export default Search;