-1

I wanna display the data that I have in my state in a map I managed to get both latitude and longitude in my state the problem is whenever try to map trough the state I always get it's not a function error here's parts of my code and the data that I have in the state:

const [countriesData, setCountriesData] = useState({});
useEffect(() => {
const fetchAPI = async () => {
  setCountriesData(await fetchDataCountries());
};
fetchAPI();
}, [setCountriesData]);

console.log(countriesData);

and mapping through it like this: 

 {countriesData.map((data)=>(
     <Marker latitude={data.countriesData.latitude}
     longitude={data.countriesData.longitude}/>
     ))}

the fetch api function:

export const fetchDataCountries = async () => {
  try {
    const data = await axios.get(url);
    const newData = data.data;
    const modfiedData = newData.map((countryData) => {
      return countryData.coordinates;
    });
    return modfiedData;
  } catch (error) {
    console.log(error);
  }
};
HAYTHAM
  • 1
  • 4

2 Answers2

0

For your map to work you need to convert yourstate to an array, now it is an object.

After that, it could look something like this:

{countriesData.map((country) => (
  <Marker
    latitude={country.latitude}
    longitude={country.longitude}
  />
))}

or

{countriesData.map(({ latitude, longitude }) => (
  <Marker
    latitude={latitude}
    longitude={longitude}
  />
))}

But for a more accurate answer, it would be nice to have an example of the contents of your state.

Lucas Ruy
  • 15
  • 1
  • 6
  • the contain a 323 array and inside of each, i have something like this :[0 … 99] and 0: latitude: "53.9333" longitude: "-116.5765" __proto__: Object i wanna use the latitude and longitude in other to display it in the map – HAYTHAM May 14 '20 at 02:46
  • so I think the code above should help you solve your problem – Lucas Ruy May 14 '20 at 02:53
  • no it still says CountriesData.mao in not a function – HAYTHAM May 14 '20 at 03:02
0

You're initializing the countriesData with an empty object, then you're fetching a API data.

Assuming the response is an array of objects like this: 

[
   { latitude: 38.8451, longitude: -37.0294 }
   { ... // other coordinates }
]

Change the initial state to be an empty array like this:

const [countriesData, setCountriesData] = useState([]);

Also, update this block:

{countriesData.map((data) => <Marker latitude={data.latitude} longitude={data.longitude} />)}

Explanation: the map() method only works with Arrays [] and not with Objects {}, therefore when the component was mounted/initialized for the first time, the map method was executed against an object, thus throwing the map is not a function error.

Bassem
  • 3,582
  • 2
  • 24
  • 47
  • i've try this earlier but still stuck ,my problem is i get 4 call of the useEffect and i managed to use ternary to check if the data exist and use the response as i said is an multiple object were inside of each there an array of object when i try to use console.log(countriesData[0]) i get 0: {latitude: "53.9333", longitude: "-116.5765"} but i can't go inside of it to use those proprieties – HAYTHAM May 14 '20 at 04:49
  • Having the console.log many times in the useEffect is not really a problem – Bassem May 14 '20 at 04:54