reactjs - Irritating API bug in react, cannot figure it out

Question

I have an API call set up with two search buttons from one input box. Each button adds something using state to the api call which the code below should demonstrate. The calls both work fine independently and display the correct information.

If a user has clicked the 'wild cards' button the results show but then on clicking the 'standard set' button the results don't re-render the correct results until the button is pressed a second time (vice versa for both buttons).

I have removed the un-related code as to condense the question

Any help appreciated

Home.js - with api call, state and functions passed down as props to the searchBar

export const Home = () => {
        const [searchTerm, setSearchTerm] = useState('')
        const [wild, setWild] = useState('')
        let accessToken;
    
        const getCards = async() => {
            try {
                await getToken()
                const response = await fetch(`https://eu.api.blizzard.com/hearthstone/cards/?collectible=1${wild}&textFilter=${searchTerm}&locale=en-US$access_token=${accessToken}`, {
                headers: {
                    Authorization: `Bearer ${accessToken}`
                }})
            const data = await response.json()
            const {cards} = data
            if (cards){
                const newCards = cards.map((card) => { ** some data i want ** }
                  
                setCards(newCards)
            }
            } catch (error) {
                console.log(error)
            } 
        }

    return (
             <SearchBar     getCards = {getCards}
                            setWild = {setWild}
                            setSearchTerm = {setSearchTerm} />
            </div>
        </div>  
    )
 }

SearchBar Component - again condensed for the sake of this question

export const SearchBar = (props) => {
    const searchBox = useRef('')
   
    const handleClickWild = (e) => {
        e.preventDefault()
        props.setWild('')
        props.getCards()
    }

    const handleClickStandard = (e) => {
        e.preventDefault()
        props.setWild('&set=standard')
        props.getCards()
    }

    const handleChange = (e) => {
        props.setSearchTerm(e.target.value)
    }

    return (
        <form>
            <input className = 'input-search'
            type = 'text'
            placeholder = 'Search for Cards by Name...'
            ref = {searchBox} 
            onChange = {handleChange} />
            <div className = 'search-buttons'>
                <input type = 'submit' className = 'button-search' onClick = {handleClickWild} value = 'Wild Cards' />
                <input type = 'submit' className = 'button-search' onClick = {handleClickStandard} value = 'Standard Set' />
            </div>
        </form>
    )
}

question from:https://stackoverflow.com/questions/65943846/irritating-api-bug-in-react-cannot-figure-it-out

Answer 1

You have to use useEffect hook here.

You can use wild in dependency array and whenever you change the value of searchTerm use effect will automatically call your getCards function.

As you mentioned in the comment you want to show changes when user search anything then keep the wild in simple variable and add search term in useEffect and if you want you can add both in the useEffect dependency array

useEffect(()=> {
   getCards()
}, [searchTerm])

Just remove explicite calls of props.getCards after setting wild from SearchBar component.