How to show multiple Map marker in map in react-native?

Question

I have created an application. My requirement is that when I enter any city name and skills in TextInput in map multiple marker return.

 const GetJob =async()=>{
          await fetch('https://thejoblocator.co.uk/api/RestJobs',{
            method:'post',
            headers:{
              'Content-Type':'application/json'
            },
            body:JSON.stringify({
              longitude:73.0479,
              latitude:33.6844,
              keyword:'web Development'
            })
          }).then(res=>res.json())
          .then(result=>{
           
            console.log(result)
          }).catch(err=>{
            console.log("Get Job error is ",err)
          }) 
        }


      <MapView
          provider={PROVIDER_GOOGLE} // remove if not using Google Maps
          style={styles.map}
         
          region={{
            latitude: LATITUDE,
            longitude: LONGITUDE,
            latitudeDelta: 0.015,
            longitudeDelta: 0.0121,
          }}
        >
         
        
          <Marker 
            coordinate={{
              latitude: LATITUDE,
              longitude: LONGITUDE,
            }}
            image={require('../assets/map_marker.png')}
            title="Test Title"
            description="This is the test description"
            >
              </Marker>    
        </MapView>

Answer 1

Save the response data in the state and map the state to render multiple markers.

const [data, setData] = useState([])

const GetJob =async()=>{
    await fetch('https://thejoblocator.co.uk/api/RestJobs',{
        method:'post',
        headers:{
          'Content-Type':'application/json'
        },
        body:JSON.stringify({
          longitude:73.0479,
          latitude:33.6844,
          keyword:'web Development'
        })
    }).then(res=>res.json())
      .then(result=>{
        console.log(result)
        setData([...result])  // result must be an array..
   }).catch(err=>{
       console.log("Get Job error is ",err)
   }) 
}

return (
    <MapView
        provider={PROVIDER_GOOGLE} // remove if not using Google Maps
        style={styles.map}
        region={{
            latitude: LATITUDE,
            longitude: LONGITUDE,
            latitudeDelta: 0.015,
            longitudeDelta: 0.0121,
          }}
    >    
    {
        data && data.length ? data.map((item) => {
            return (
               <Marker 
                   coordinate={{
                       latitude: item.LATITUDE,
                       longitude: item.LONGITUDE,
                   }}
                   image={require('../assets/map_marker.png')}
                   title="Test Title"
                   description="This is the test description"
              />
            )
        }) : null
    }
    </MapView>
)