I only want to show the parent-child ability in ReactJS - reactjs

Question

I am trying to learn ReactJS API and want to achive the parent-child but it still doesn't work and I can't find the criteria that I want in those videos.
What I've tried by watching tutorials:
import './App.css';
import Axios from 'axios'
import { useState } from 'react';
function App() {
const [pokeName, setPokeName] = useState("")
const [ability, setAbillity] = useState("")
const data = () => {
Axios.get(`https://pokeapi.co/api/v2/pokemon/${pokeName}`).then((res) => {
console.log(res.data)
setAbillity(res.data)
})
}
return (
<div className="App">
<input placeholder='name of pokemon...' onChange={(event) => {setPokeName(event.target.value.toLowerCase())}} />
<br />
<br />
<button onClick={data}>Click</button>
<br />
<br />
<br />
<h1>Abilities: {ability.power}
</h1>
</div>
);
}
export default App;

Answer 1

Try with pikachu, charizard
const App = () => {
const [pokeName, setPokeName] = React.useState("")
const [ability, setAbillity] = React.useState([])
const data = () => { fetch(`https://pokeapi.co/api/v2/pokemon/${pokeName}`)
.then((res) => res.json())
.then((res) => {
setAbillity(res.abilities)
})
}
return (
<div className="App">
<input placeholder='name of pokemon...' onChange={(event) => {setPokeName(event.target.value.toLowerCase())}} />
<br />
<br />
<button onClick={data}>Click</button>
<br />
<br />
<br />
<h1>Abilities: {ability.map(item => item.ability.name).join(", ")}
</h1>
</div>
)
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
<script src="https://unpkg.com/react#16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16.7.0-alpha.0/umd/react-dom.development.js"></script>
<div id="root"></div>