Having problems mapping json data in react

Question

hey guys i dont know why my setPlaceId works but not my setPlaceName placeName doesnt print anything when there is some data that should be printed out could someone help? So yea i added more code, if you need more things ill post it, thanks for everyones help in advance i wish i can fix this as soon as possible.

tldr: setPlaceId pastes text but setPlaceName doesnt paste text when there are info that should be pasted.

btw i deleted some stuff from the code so it wouldnt be so long so dont worry about me not having some stuff that i called

function ConvertPlaces() {
  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: {
          //deleted 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;

Answer 1

I am not sure this is going to solve your issue, as you should really show a little bit more code but, regardless of that, may I suggest you loop through the response only once?

// ...
fetch([API endpoint])
  .then(res => res.json())
  .then(response => {
    const setPlaceData = response.reduce((outObj, airport) => {
      outObj.PlaceNames.push(airport.PlaceName);
      outObj.PlaceIds.push(airport.PlaceId);
      return outObj;
    }, { PlaceNames: [], PlaceIds: [] });
    
    /*
     * I am assuming that you are using 'useState()' hook and
     * you are willingly replacing whatever content is already
     * present in your state variables rather than adding to it.
     * E.g.
     * setPlaceName([...placeName, ...setPlaceData.PlaceNames]);
     */
    setPlaceName(setPlaceData.PlaceNames);
    setPlaceId(setPlaceData.PlaceIds);
  });
// ...