Help using json data2

JavaScript
1

hey guys i dont know why my setPlaceId works but not my setPlaceName doesnt print anything when there is some data that should be printed out could someone help? (i have both placeId and placeName in a p tag)

import React, { useState, useEffect } from "react";
import SearchPlaces from "./SearchPlaces";

function ConvertPlaces() {
  const [userInput, setUserInput] = useState("");
  const [inputField, setInputField] = useState("");
  const [savedInput, setSavedInput] = useState("");
  const [placeName, setPlaceName] = useState("");
  const [placeId, setPlaceId] = useState("");

  useEffect(() => {
    convert();
  }, []);

  const convert = () => {
    fetch(
      `https://skyscanner-skyscanner-flight-search-v1.p.rapidapi.com/apiservices/autosuggest/v1.0/UK/GBP/en-GB/?query=${userInput}`,
      {
        method: "GET",
        headers: {
          //i deleted this cuz of api keys
        },
      }
    )
      .then((res) => res.json())
      .then((response) => {
        console.log(response);
        setPlaceName(response.Places.map((airport) => airport.PlaceName));
        setPlaceId(response.Places.map((airport) => airport.PlaceId));
      })
      .catch((err) => {
        console.log(err);
      });
  };
  const handleChange = (event) => {
    setInputField(event.target.value);
    setUserInput(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    setSavedInput(inputField);
    setInputField("");
    convert();
  };

  return (
    <div>
      <SearchPlaces
        run={convert}
        handleChange={handleChange}
        handleSubmit={handleSubmit}
        inputField={inputField}
        userInput={userInput}
        savedInput={savedInput}
      />
      <p>sfdajfp</p>
      <p>{placeId}</p>
      <p>{placeName}</p>
    </div>
  );
}

export default ConvertPlaces;

json
json1920×1080 181 KB

2

It is difficult to tell what is wrong with your code. It would be better to have a codesandbox for your code. What exactly do you mean by:

my setPlaceId works but not my setPlaceName?

I assume those are state dispatchers, aren’t they dispatching state?

3

yea i edited cuz it didnt explain the situation well, but i meant that my setPlaceId prints the text its given but the setPlaceName doesnt

4

I don’t see you printing any where in your code apart from console.log(response); and console.log(err);. Where exactly are you printing the state? Secondly the way you are fetching data is not correct. You must perform side effects inside useEffect and it is recommended you define convert inside useEffect or pass it as a dependency to useEffect if you define it outside like above.

5

not printing it but putting in the p tag, the placeId data is shown but the placeName doesnt put out anything

6

Try console.log(placeName) just before return to see what it is. Most likely it is still "".

7

i dont know why but it works now :rofl: :rofl: :rofl: :rofl: