Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How do i fetch api data that is a link?

ive tried to just add another fetch to see if it would work but it hasn’t. can anyone explain this issue so i get something out of this.

<ul className="">

      { async function fetchURL() {
         const res = await axios.get(ability.ability.url);
         const data = res.data;
         setabilityDes(data)
                                     
           pokedata.abilities.map( async (ability, index) => (
                                      
           <li key={index} className="inline px-3" >         {ability.ability.name}
         <p>{data.effect}</p>
            </li>
                                         
                ))}}
                   </ul>

this is the error i am getting

‘Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.
ul
div
div
div
div
PokemonData@http://localhost:5173/src/pages/PokemonData.jsx?t=1711809411667:23:20
RenderedRoute@http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=45fa90fa:3563:7
Routes@http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=45fa90fa:3997:7
Router@http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=45fa90fa:3945:7
BrowserRouter@http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=45fa90fa:4682:7
App’

ive also tried make a new component for just the ability section but i kept running into errors so i thought this would be more efficient

Tags:

2

Answers


  1. 0

    The structure of your query is not correct. There are a lot of ways to fix this problem, but essentially you need to separate the data call from the component display instead of trying to do both all at once.

    This is usually done with React Hooks, and there are numerous examples out there of how to accomplish this. Like this one.

    The thing to notice about that approach is that it uses the useState and useEffect hooks to separate the problem into several parts. This approach has the benefit of being reusable and scalable, as it can be easily adjusted to solve any data-fetching problem.

    So in the example given in the link I posted, the solution is broken into different pieces:

    // Library imports

// Component definition
function someFunction () {
  // useEffect hook for polling
    useEffect(() => {
      // Check to see if data needs to update and if it does
      // call getPost()
    }, [])

  // useState hook for managing state and making
  //   it available to the rest of the component
  const [someState, setSomeState] = useState(state)

  const getPost() => {
    // This is where the data call happens, 
    // Query the API and 
    // pass the results are passed to someState
  }
  
  // merge the results of someState() with the UI
  render(
    // map the data in someState 
    // to the UI elements.
  )
}

    Generally speaking, you’re going to want to separate your concerns as much as you can when computer programming. If you’re trying to grab state, set state, and render state all in one big chunk of code, it’s probably time to slow down and re-think your approach to handle each problem one at a time.

    Try re-writing your component in something closer to this form and ask again and I’m glad to help you get where you’re going.

    Login or Signup to reply.
  2. 0

    You don’t use functions and logic codes in jsx section!

    change your code to this:

    import { useState, useEffect } from "react";
import axios from "axios";

const Component = () => {
  const [abilities, setAbilities] = useState([]);

  async function fetchURL() {
    const res = await axios.get("url to fetch");
    const data = res.data;
    setAbilities(data);
  }

  useEffect(() => {
    fetchURL();
  }, []);

  return (
    <ul className="">
      {abilities.map((ability, index) => (
        <li key={index} className="inline px-3">
          {ability.name}
          <p>{ability.effect}</p>
        </li>
      ))}
    </ul>
  );
};

export default Component;

    for learn more about this codes go to react documents

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search