CODEWITHSUNDEEP
htmlarraysreactjsapi
user14141591
user14141591

Reputation:

React use declared const in other file

I've tried to search around for a solution, but I can't find anything that helps.

I want to be able to take the details from the api and be able to pass it's information to another page. The name is currently defined like "drink.strDrink" and so is the image and so on.

But I want to get the date in another document after fetching it, here's what I've got.

// Here I get the data from the API    
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)
    })
  }

// Here I use the data from the API    
<Fragment key={index} >
                <Card.Img variant="top" src={drink.strDrinkThumb} />
                  <Card.Body>
                    <Card.Title>{drink.strDrink}</Card.Title>
                    <Card.Text style={{overflow: 'hidden', whiteSpace: 'pre'}}>
                      <p>{drink.strCategory}</p>
                    </Card.Text>
                    <Router>
                    <Button variant="primary"><Link to={"/drink#"+drink.strDrink.replace(/\s+/g, '-')}>More info</Link></Button>
                    </Router>
                  </Card.Body>
              </Fragment>

Upvotes: 0

Views: 77

Answers (1)

Jonas Hendel
Jonas Hendel

Reputation: 586

You can either use a state management tool like redux or the context api:

https://react-redux.js.org/

https://reactjs.org/docs/context.html

Or you can lift state up and pass the state as props:

https://reactjs.org/docs/lifting-state-up.html

Upvotes: 2

Related Questions