I am fetching jokes data on the first time component rendered in useEffect hooks. But after that, I want to get new jokes data when the Want more button will be clicked, so I am handling that in handleNewJoke function. But here is the problem I am repeating same code. What approch should I take here?
import * as React from "react"; import { useState, useEffect } from "react"; import axios from "axios"; import Jokes from "./components/Jokes"; export interface JokesProp { id: number; type: string; setup: string; punchline: string; } const App: React.FC = () => { const [jokes, setJokes] = useState<JokesProp>({ id: 166, type: "general", setup: "What did one wall say to the other wall?", punchline: "I'll meet you at the corner!", }); useEffect(() => { const getJokes = async () => { const response = await axios.get( "https://official-joke-api.appspot.com/random_joke" ); setJokes(response.data); }; getJokes(); }, []); const handleNewJokes = async () => { const response = await axios.get( "https://official-joke-api.appspot.com/random_joke" ); setJokes(response.data); }; return ( <main> <h1>Jokes</h1> <Jokes jokes={jokes} /> <button onClick={handleNewJokes}>want more</button> </main> ); }; export default App; 
Top comments (3)
Can you not do this?
useEffect(() => {
handleNewJokes();
}, []);
This should call the arrow function after your component has mounted.
Haha 😀. This was simple. Thank you. I always think of easy things in complicated way
No problem! Good luck!