How can i make a button actvate my searchSpell function? - reactjs

Question

i am finishing my first react project. But I cant make this button work. I keep giving me the same error below
error console message: Uncaught TypeError_axios_api_js__WEBPACK_IMPORTED_MODULE_1__.default.request is not a function
code:
function Header(){
const { searchSpell } = Hooker();
const [whatSpell, setWhatSpell] = useState()
function pesquisar () {
if(!whatSpell){
alert("escreva alguma coisa antes de pesquisar")
return
} else{
return searchSpell(whatSpell)
}
}
another code:
import { SpellContext } from "../provider.js"
function Hooker (){
const { spellState, searchSpell } = useContext(SpellContext)
return { spellState, searchSpell }
}
export default Hooker
and the function one:
function BaseInfo({ children }){
const [spellState, setSpellState] = useState({
name: undefined,
desc: undefined,
higher_level: undefined,
range: undefined,
components: undefined,
material: undefined,
ritual: false,
duration: undefined,
concentration: false,
casting_time: undefined,
level: 0,
});
const searchSpell = (spellName) => {
api.request(spellName).then(function(response) {
setSpellState(prevState => ({
...prevState,
name: response.data.name,
desc: response.data.desc,
higher_level: response.data.higher_level,
range: response.data.range,
components: response.data.components,
material: response.data.material,
ritual: response.data.ritual,
duration: response.data.duration,
concentration: response.data.concentration,
casting_time: response.data.duration,
level: response.data.duration,
})
)
})
console.log(spellState.duration)
}
const contextValue = {
spellState,
searchSpell: useCallback((spellName) => searchSpell(spellName), []),
}
return(
<SpellContext.Provider value={contextValue}>
{children}
</SpellContext.Provider>
)
}
export default BaseInfo

Answer 1

I don't think it's the button's fault. The error message indicates you're calling searchSpell, but there is something wrong with the way you're writing the API request.
If you're using axios as the error suggests. Check the axios documentation for proper installation, importing and usage.
Example usage for your use case:
import axios from "axios"
// ... ...
axios.request(spellName).then(function() {
// ... ...