Rendering content in react js on submit button

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;