CODEWITHSUNDEEP
htmlreactjslistapiaxios
user14141591
user14141591

Reputation:

get items from api into list in react

I am working in React and met a problem with the data from my API. I need to take the date and print all of the results from my search, but I can't. right now the index of the array is set to [0], which allows me to print the wanted details for 1 product. any ideas how I can print all of the results?

  const [drink, setDrink] = useState([])
  const [drinkCat, setDrinkCat] = useState([])
  const [drinkImg, setDrinkImg] = useState([])
  const [drinkList, setDrinkList] = useState([])
  const [id, setId] = useState()
  const [idFromButtonClick, setIdFromButtonClick] = useState(1)
  const [active, setActive] = useState("inactive")

  const getDrink = () => {
    Axios.get(`https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${id}`).then((res)=> {
      console.log(res)
      setDrinkList(res.data.drinks.length)
      setDrink(res.data.drinks[0].strDrink)
      setDrinkCat(res.data.drinks[0].strCategory)
      setDrinkImg(res.data.drinks[0].strDrinkThumb)
    })
  }

  const handleClick = () => {
      setIdFromButtonClick(id)
    }

  return (
    <body>
    <div>
        <h1>    
        </h1>    
        <ul className="test">
        <input id="searchBar" type="text" value={id} placeholder="Søg efter drink"  onChange={e => setId(e.target.value)}></input>
        <button onClick={handleClick, getDrink}>Søg🔍</button>
          <li>
          <Card style={{ width: '18rem' }}>
            <Card.Img variant="top" src={drinkImg} />
            <Card.Body>
              <Card.Title>{drink}</Card.Title>
              <Card.Text>
                <p>{drinkCat}</p>
              </Card.Text>
            </Card.Body>
          </Card>
          </li>
        </ul>
    </div>
    </body>
  )}

Upvotes: 0

Views: 1160

Answers (2)

D M
D M

Reputation: 58

You should map your list:

import { Fragment } from 'react';

...

setDrinkList(res.data.drinks);

...

<Card style={{ width: '18rem' }}>
  {drinkList.map((drink, index) => {
    return (
      <Fragment key={index}>
        <Card.Img variant="top" src={drink.strDrinkThumb} />
        <Card.Body>
          <Card.Title>{drink.strDrink}</Card.Title>
          <Card.Text>
            <p>{drink.strCategory}</p>
          </Card.Text>
        </Card.Body>
      </Fragment>
    )
  })}
</Card>

Upvotes: 0

Rahul
Rahul

Reputation: 5834

Simply run a map.

const [drink, setDrink] = useState([])
  const [drinkCat, setDrinkCat] = useState([])
  const [drinkImg, setDrinkImg] = useState([])
  const [drinkList, setDrinkList] = useState([])
  const [id, setId] = useState()
    const [idFromButtonClick, setIdFromButtonClick] = useState(1)
  const [active, setActive] = useState("inactive")

  const getDrink = () => {
    Axios.get(`https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${id}`).then((res)=> {
      console.log(res)
      if(res && res.data && res.data.drinks) {
        setDrinkList(res.data.drinks);
      }
    })
  }

    const handleClick = () => {
        setIdFromButtonClick(id)
    }

    return (
    <body>
    <div>
        <h1>

        </h1>

        <ul className="test">
        <input id="searchBar" type="text" value={id} placeholder="Søg efter drink"  onChange={e => setId(e.target.value)}></input>
        <button onClick={handleClick, getDrink}>Søg🔍</button>
          {
            drinkList.map((drnk, index)=> {
                return   <li key={index}>
                <Card style={{ width: '18rem' }}>
                  <Card.Img variant="top" src={drnk.strDrinkThumb} />
                  <Card.Body>
                    <Card.Title>{drnk.strDrink}</Card.Title>
                    <Card.Text>
                      <p>{drnk.strCategory}</p>
                    </Card.Text>
                  </Card.Body>
                </Card>
                </li>
            })

          }
        </ul>
    </div>
    </body>
)}

Upvotes: 2

Related Questions