after few hours of trying to correct the code i'm coming here for help. the idea is to search for a character and show few details that i choose, and right now i simply can't get around this issue where i try to iterate on the death array and gather some information from there :
I'm working with this API : https://tibiadata.com/doc-api-v2/characters/
import React ,{useEffect,useState}from 'react'
import './App.css';
import SearchCharacter from './SearchCharacter'
import Death from './Death'
function App() {
const [currentPlayer,setCurrentPlayer] =useState([])
const [playerDeath,setPlayerDeath] =useState([])
const [search,setSearch] = useState("")
const [query,setQuery] = useState('')
const BASE_URL = `https://api.tibiadata.com/v2/characters/${query}.json`
useEffect(() => {
fetch(BASE_URL)
.then(res =>res.json())
.then(data=>{
setCurrentPlayer(data.characters.data,...Object.keys(data.characters.data))
setPlayerDeath(...data.characters.deaths,...Object.keys(data.characters.deaths))
})
}, [query])
const updateSearch = e=>{
setSearch(e.target.value)
}
const getSearch =e =>{
e.preventDefault();
setQuery(search)
setSearch('')
}
return (
<div>
<h1>Tibia </h1>
<form onSubmit ={getSearch}>
<input placeholder="Enter Name" input ={search} onChange ={updateSearch}/>
<button >Search</button>
</form>
<SearchCharacter currentPlayer ={currentPlayer}/>
{playerDeath.map(death =>(<Death
key = {death.death.reason}
reason = {death.death.reason}
level = {death.death.level}
/>))}
</div>
)
}
export default App
Death Component :
import React from 'react'
const Death =({reason,level}) =>{
return (
<div>
<p>Player Death: Played died by {reason} at level : {level}</p>
</div>
)
}
export default Death;
Search Character Component :
import React from 'react'
const SearchCharacter =({currentPlayer}) =>{
return (
<div>
<p>Player Name :{currentPlayer.name}</p>
<p>Player Level :{currentPlayer.level}</p>
<p>Player Vocation :{currentPlayer.vocation}</p>
</div>
)
}
export default SearchCharacter
what i'm basically trying to do is have all of the deaths of a character presented under "Player Death" but no matter the variation of the code i'm trying i keep on getting the same error :
data.map is not a function - i have tried adapting other solutions to my code but i can't make it seem to work. at some point i could show one death ,and if there were no deaths - the code would crash.
right now after playing a lot with my code it won't even show the Death component jsx .
any help will be appreciated!
