Search button refreshing page

[DG-98]

What stack are you using?

(ex: MERN(mongoose + react), DR(django + react), PEN, etc.)

MERN

What's the problem you're trying to solve?

Search button refreshing page and not running code

Post any code you think might be relevant (one fenced block per file)

      e.preventDefault()
      fetch(`https://api.jikan.moe/v3/search/anime?q=${search}`)
      .then((response) => {
        return response.json()
      })
      .then(searchResult => {
        console.log('these are first results', searchResult)
        setAnimeResults(searchResult.results)
        console.log("these are results", searchResult.result)
      })
      .catch((error) => {
        console.log(error)
      })
  }

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

Sometimes there is an error saying my .map to render the search results isn't a function.

What is your best guess as to the source of the problem?

Not really sure. It's hard for me to see if I get the proper things when the page refreshes.

What things have you already tried to solve the problem?

I tried putting the call in a useEffect but the page doesn't load, I've also tried using a prevent default in the on submit function

[timmshinbone]

Looks like the code block you used is cut off at the top, share with the entire thing, and also show me(in a separate code block) the search bar form

[DG-98]

const searchAnime = (e) =>{
      e.preventDefault()
      fetch(`https://api.jikan.moe/v3/search/anime?q=${search}`)
      .then((response) => {
        return response.json()
      })
      .then(searchResult => {
        console.log('these are first results', searchResult)
        setAnimeResults(searchResult.results)
        console.log("these are results", searchResult.result)
      })
      .catch((error) => {
        console.log(error)
      })
  }

[DG-98]

 <form value={search}>
        <input
          type="text"
          id="animeSearch"
          name="animeSearch"
          onChange={handleChange}
        ></input>
        <input type="submit" value="Search" onSubmit={searchAnime} ></input>
      </form>

[TaylorDarneille]

Put the onSubmit as an event on the form tag, not the input tag

[TaylorDarneille]

and if that alone doesn't fix it, wrap the searchAnime in a anonymous function and pass it the e object

<form value={search} onSubmit={()=>searchAnime(e)} >

[DG-98]

that fixed it, I assumed the on submit would be tied to the actual button, thank you!