WDI-SEA / project-4-issues

Open an issue to receive help on project 4 issues
0 stars 0 forks source link

trying to figure out how to call API #56

Closed anaismveras closed 2 years ago

anaismveras commented 2 years ago

What stack are you using?

(ex: MERN(mongoose + react), DR(django + react), PEN, etc.)

MERN

What's the problem you're trying to solve?

I want to call the api when i press a link but i am not sure how to get it

Post any code you think might be relevant (one fenced block per file)

// --------- getting the destination from API based on link name---//
        const handleClick = (e) => {
            setLinkInfo(e.target)
        }

        const mapDestinations = allCityInfo.map((place, i) => {
            // console.log('this is place', place)
            if (place.imageUrl) {
                return (
                    <div className="favPlace">
                    <form onSubmit={submitDestination}>
                    <Link onClick={handleClick} to='/destination-profile/:destinationId'><div class="favPlaceName"><h3>{place.cityName}</h3></div></Link>
                    <img src={place.imageUrl} alt={place.cityName} className="favPlaceImg" /><br></br>
                    </form>
                    <button class="addFavBtn" onClick={() => {saveCity(i)}}>Add to your Gaycations</button>
                </div>
                )
            } else {
                return (
                    <div>
                    <Link to='/destination-profile/:destinationId'><div class="favPlaceName"><h3>{place.cityName}</h3></div></Link>
                    <p>{place.cityImageId}</p>
                    <button class="addFavBtn" onClick={() => {saveCity(i)}}>Add to your Gaycations</button>
                </div>
                )
            }
        })

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

no error

What is your best guess as to the source of the problem?

im not sure how to get the onsubmit to do something

What things have you already tried to solve the problem?

timmshinbone commented 2 years ago

Clicking the link takes the user to a component, the component mounts and renders, inside a useEffect in that component is where the api call happens, which makes it render again with all the data it received from the api

anaismveras commented 2 years ago

i get that but idk where to put the clicks for things to understand each other

TaylorDarneille commented 2 years ago

put the API call in the useEffect of the component the Link renders