How to refactor useEffect to onlick function

Question

I need to fetch when a user clicking on the submit button but I'm absolutely don't know how to do that:

export default function SearchSong() {
    const [topSongs, setTopSongs] = useState([]);
  
    useEffect(() => {
      const fetchData = async () => {
        try {
          const response = await fetch(
            "http://ws.audioscrobbler.com/2.0/?method=track.search&track=Positions&api_key=a3c9fd095f275f4139c33345e78741ed&format=json"
          );
          const data = await response.json();
          setTopSongs(data);
        } catch (error) {
          console.log(error.message);
        }
      };
      fetchData();
    }, []);
  
    return (
      <div>
        <div className="inner-input">
            <h1 className="search">Search for song:
            <input size="50" type="text"/>
            <button type="submit"></button>
            </h1>
        </div>
        {topSongs?.results?.trackmatches?.track.length &&
          topSongs.results.trackmatches.track.map((datumn) => {
            return (
              <Fragment key={datumn.name}>
                              <h1 className='heading'>{datumn.name}</h1>
              </Fragment>
            );
          })}
      </div>
    )
  }

I can do it with class component, but not functional

Answer 1

I absolutely agree with @Shimi who commented. Why would you need useEffect?

Try to do something similar:

<button onClick={fetchData} >Fetch</button>

Define fetchData in SearchSong.

example:

export default function SearchSong() {
    const [topSongs, setTopSongs] = useState([]);

    const fetchData = async () => {
        try {
          const response = await fetch(
            "http://ws.audioscrobbler.com/2.0/?method=track.search&track=Positions&api_key=a3c9fd095f275f4139c33345e78741ed&format=json"
          );
          const data = await response.json();
          setTopSongs(data);
        } catch (error) {
          console.log(error.message);
        }
      };
  
    return (
      <div>
        <div className="inner-input">
            <h1 className="search">Search for song:
            </h1>
            <input size="50" type="text"/>
            <button onClick={fetchData} >Fetch</button>
        </div>
        {topSongs?.results?.trackmatches?.track.length &&
          topSongs.results.trackmatches.track.map((datumn) => {
            return (
              <Fragment key={datumn.name}>
                              <h1 className='heading'>{datumn.name}</h1>
              </Fragment>
            );
          })}
      </div>
    )
  }