score:1

Accepted answer
<div>
{
  responseData?.results.length && responseData.results.map(el => {
      return <p>{el.name}</p>
  })
}
</div>

score:0

export default function App() {
  const [responseData, setResponseData] = React.useState(null);
  React.useEffect(() => {
    axios
      .get("https://pokeapi.co/api/v2/pokemon/?offset=0&limit=50")
      .then(response => {
        setResponseData(response.data);
      });
  }, []);
  return (
    <div className="App">
      {responseData&&responseData.results.map(result => (
        <div key={result.url}>{result.name}</div>
      ))}
    </div>
  );
}

score:1

<div>
 {JSON.stringify(responseData)}
</div>

score:1

const PokemonAPI = props => {

        // Get API
        const [responseData, setResponseData] = useState({});
        const { results = [] } = responseData;
        const validJSX = results.map(result => (
          <>
            <div>Name: {results.name}</div>
            <div>URL: {result.url}</div>
          </>
        ));
        useEffect(()=>{
            axios.get("https://pokeapi.co/api/v2/pokemon/?offset=0&limit=50")
                .then(response=>{setResponseData(response.data)})
        }, []); 
    
        return(
            <div>
                {validJSX}
            </div>
        )
    }

export default PokemonAPI;

Related Query

More Query from same tag