React Get data from json-server and display in slider-CodePudding

i have a JSON as a server, the JSON have a 'recipes' array which have objects into it

"recipes": [
    {
      "id": "1",
      "title": "Arepa",
      "description": "...",
      "image": "...",
      "preparation": "...",
      "ingredients": "..",
      "notes": "..."
    },
    {
      "id": "2",
      "title": "Burritos",
      "description": "...",
      "image": "...",
      "preparation": "...",
      "ingredients": "...",
      "notes": "..."
    }

Iḿ trying to display the images into a slider with a loop,but the only thing im getting is errors and frustration,i cant get data easily but display it get me errors, I've tried so many thing and nothing work. this is my code.

TopTen.js

import { CarouselProvider, Slider, ButtonBack, ButtonNext } from 'pure-react-carousel';

const Topten = () => {
  return (
    <div id="topTenContainer">
      <CarouselProvider
        naturalSlideWidth={100}
        naturalSlideHeight={125}
        totalSlides={3}
      >
        <Slider>
          //// here must be the images ////
        </Slider>
        <ButtonBack>Back</ButtonBack>
        <ButtonNext>Next</ButtonNext>
      </CarouselProvider>
    </div>
  );
};

export default Topten;

when i tried create a async function and tried put into i have this error => Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.here the example

import database from "../api/database"

const Sliderr = async() =>{
    const responde = await database.get('recipes');
    const recipes = responde.data;

    return(
            {
                recipes.map(post =>{
                    return(
                        <div key={post.id}>
                            <h1>{post.title}</h1>
                        </div>
                    )
                })
            }
    )
}

export default Sliderr

any help please?

CodePudding user response：

Can you print "recipe" and "responde" values in the console? if you can print it, try pulling the constants of the specified variables from "const" to "var".First of all, make sure of the returned answer. Perform step by step operations.

CodePudding user response：

 recipes?.map(post =>{
                    return(
                        <div key={post?.id}>
                            <h1>{post?.title}</h1>
                        </div>
                    )
                })

you have to check if data has title field render the h1 component with using mark question

CodePudding user response：

Well, the main problem is in fact as stated in the log: Your Sliderr Component should return a NON async function. The function/functional-component "Sliderr" returns a Promise when you use it inside the jsx block in TopTen.js as it is declared as an async function.

You could handle the async aspect inside a useEffect e. g.


const Topten = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const getPosts = async () => setData(await database.get('recipes'));
    getPosts();
  }, []);

  return (
    <div id="topTenContainer">
      <CarouselProvider
        naturalSlideWidth={100}
        naturalSlideHeight={125}
        totalSlides={data.length}
      >
        <Slider>
          {data.map(post => <Slide>{post.title}</Slide>)}
        </Slider>
        <ButtonBack>Back</ButtonBack>
        <ButtonNext>Next</ButtonNext>
      </CarouselProvider>
    </div>
  );
};

You still would need to refactor your Sliderr Component into Slide though taking post.title as the children-prop.

Building on that you could think about extracting the api call into a custom hook.

[Edit: Sorry about my optimistic approach. I left out the error handling for the request]