Im missing something, I need to display 9 cards, but I can only get 1 out

user_17663022 0
Viewed 94

so I'm trying to display 9 jokes. I can only display 1 joke now, This is what it says on the console :

Object { error: false, amount: 9, jokes: (9) […] }
​
amount: 9
​
error: false
​
chistes1: Array(9) [ {…}, {…}, {…}, … ]
​
<prototype>: Object { … }
app.js:35:10
)

Any ideas what I'm I missing?

This is what I have so far:


function appInfo() {
  const [chistes1, goingChis] = React.useState([]);

  React.useEffect(() => {
    fetch(url)
      .then((Response) => Response.json())
      .then((data) => goingChis(data));
  }, []);

  return (
    <div className="card">
      <h1>{chistes1.setup}</h1>
      <p>{chistes1.delivery}</p>
    </div>
  );
}
javascript
2 Answers

If I get what you are asking, you have an array of jokes and you want to display all of them, but right now you are only displaying one?

If that is the case, it's because you aren't using jsx for rendering the array of your state.

You need to use map and create every item of the array.

Something like this:

return (
    <div className='gallery'>
    
    {jokes && jokes.map((joke,index) => {
    // You should probably use React.Fragment with a key, view docs: https://reactjs.org/docs/fragments.html#keyed-fragments
    return 
     <div className="card" key={index}>
        <h3>{joke.setup}</h3>
        <p>{joke.delivery}</p>
      </div>
    })
    </div>
    </div>
  );
user_159867030

When the amount=9 queryString parameter is added, the response shape changes a bit; there is a jokes property that is an array of the jokes. The ui code should be updated to handle the array of jokes.

Example response:

// 20220419013938
// https://v2.jokeapi.dev/joke/Any?type=twopart&amount=9

{
  "error": false,
  "amount": 9,
  "jokes": [
    {
      "category": "Pun",
      "type": "twopart",
      "setup": "What happens when you don't obey the KGB?",
      "delivery": "You get Putin jail.",
      "flags": {
        "nsfw": false,
        "religious": false,
        "political": true,
        "racist": false,
        "sexist": false,
        "explicit": false
      },
      "id": 70,
      "safe": false,
      "lang": "en"
    },
    ...
  ]
}

Note

Update the fetch response handling to unpack the jokes array for state, then map the jokes state to the current JSX. Don't forget to check for a successful GET request, and to use a React key when mapping the jokes.

function Note() {
  const [jokes, setJokes] = React.useState([]);

  React.useEffect(() => {
    fetch(url)
      .then((response) => {
        if (!response.ok) {
          throw new Error('Network response was not OK');
        }
        return response.json();
      })
      .then((data) => setJokes(data.jokes))
      .catch(error => {
        // handle rejected Promises and errors
      });
  }, []);


  return (
    <div className='gallery'>
      {jokes.map(joke => (
        <div key={joke.id} className="card">
          <h3>{joke.setup}</h3>
          <p>{joke.delivery}</p>
        </div>
      ))}
    </div>
  );
}
user_86908570
Related