useState and function .map - react-hooks

Question

const Monsters = function () {
const [allMonsters, setAllMonsters] = useState([]);
const [specificMonster, setSpecificMonster] = useState([]);
const [modalVisible, setModalVisible] = useState(false);
const openModal = () => {
setModalVisible(!modalVisible);
}
useEffect(() => {
axios({
method: 'get',
url: 'https://mhw-db.com/monsters',
})
.then((res) => {
setAllMonsters(res.data);
})
.catch((err) => {
console.log(err);
});
}, [])
const getSpecificMonster = (id) => {
axios({
method: 'get',
url: `https://mhw-db.com/monsters/${id}`,
})
.then((res) => {
console.log(`Je clique sur la modale avec l'id : ${id}`);
console.log(res.data);
setSpecificMonster(res.data);
openModal();
})
.catch((err) => {
console.log(err);
})
}
return (
<div className='monstersContent'>
<h1 className='monsterContent-title'>Listes des Monstres <span>Monster Hunter</span></h1>
{!modalVisible && (
<div className='cardsMonster'>
{allMonsters.map((items) => (
<div className="cardMonster" key={items.id}>
<p className='cardMonster-name--title'>{items.name}</p>
<p>Type du monstre : <span className="cardMonster-espece"></p>
<button type="button" onClick={() => { getSpecificMonster(items.id) }}>Voir plus d'informations</button>
</div>
)
)}
</div>
)}
{modalVisible && (
<>
{specificMonster.map((items)=>(
<p className='cardMonster-name--title'>{items.name}</p>
))}
<div className="cardMonster"></div>
<button onClick={openModal}>Retour</button>
</>
)}
</div>
);
hello, i want to use .map but i have a error which i dont understand
Uncaught TypeError: specificMonster.map is not a function
How can i do for rendering the informations of specific monster ? When i want to use
specificMonster.map
I always got an error
Thanks for help

Answer 1

specificMonster is being set to an object, not an array. So, you can just access the properties directly:
<p className='cardMonster-name--title'>{specificMonster.name}</p>
You should also change the useState initialization value to an object:
const [specificMonster, setSpecificMonster] = useState({});