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

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;

CodePudding user response：

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/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<div id="root"></div>