score:4
const App = () => {
const [coords, setCoords] = useState();
useEffect(() => {
navigator.geolocation.getCurrentPosition(function (position) {
setCoords(position.coords);
});
}, []);
return coords && <Child {...coords} />;
};
const Child = ({ latitude, longitude }) => {
useEffect(() => {
fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid={api_key}b&units=metric`)
.then(res => res.json())
.then(data => {
// do stuff with data
})
// .catch(handleErrors); // don't forget to catch errors
}, []);
return (
<div className="App">
<p>latitude :{latitude}</p>
<p>longitude :{longitude}</p>
</div>
);
};
Source: stackoverflow.com
Related Query
- ReactJS : Failing to fetch an API
- ReactJS componentDidMount and Fetch API
- ReactJS componentDidMount, Fetch Spotify API and Promise
- Fetch Foreign key object from an api using reactjs
- ReactJS app is unable to fetch data using REST API call
- Error 415 when call POST API using Fetch in ReactJS
- How to fetch data in ReactJS from NodeJS API for Influxdb?
- Promise rejected in POST login using fetch API in reactjs and Nodejs
- reactJS app with a fetch to an API fails to load with No 'Access-Control-Allow-Origin' header is present on the requested resource
- ReactJS get token string from API fetch
- How to solve double API fetch on universal ReactJS
- Do i really need to use forceUpdate with fetch API and ReactJS
- How do I update Reactjs State with data I retrieved using a fetch API call?
- Commonly API call for different components in ReactJS Fetch
- How do I fetch search results from multiple API using reactjs
- ReactJS Fetch User Data from API and add to table
- Fetch specific data from API ReactJS
- Fetch API with Google Directions API is not working in reactjs
- Fetch data from external Api with reactjs hooks in every 10 seconds
- Posting to .NET Core WebAPI with ReactJS frontend and fetch api
- Can not able to fetch the data from DB while consuming API in ReactJS
- ReactJS - Replacing a fetch API with axios is not working
- data.json is not a function reactjs using Fetch API
- API Fetch with reactjs and show into graph
- Error in PUT API request in reactJS fetch from frontend
- How can I fetch data from API url into my reactgoogle pie chart in reactjs
- How to fetch data from Microsoft Custom Vision API using ReactJS
- Showing JSON Data using fetch api and map in reactjs
- Reactjs app fetch an api has been block by cores even on server not localhost
- Using ReactJs to fetch data from an API but getting completely blank page with no errors
More Query from same tag
- Customize existing component with fixed css classes in React
- How to pass state as a redux action
- Router not rendering children
- Why dynamic special characters are not working in my react router?
- How to avoid react rerendering whole tree on simple className changes?
- Get the ant-design Select dropdown value when hover
- Rendering 2 navbar
- Why React Component unmounts on each useEffect dependency change?
- Nuka-carousel react move to certain slide
- Ripple effect opacity in React Material UI
- In react ,how do i force browser to ask for saving password?
- Applying conditional CSS class to ReactJS code
- Passing props to parent in React JS
- Axios.post then method doesn't run
- props.deleteComments not a function
- React Navbar onClick redirect component
- How to use Jquery Plugin with React js and react-router-dom
- How to embed an exact place on google maps in Reactjs
- Typescript react: Type inference is not working for callback refs
- why do we use curly braces while defining constant variable in react js?
- merge array object within array based on same id
- Optimized search bar filter in reactjs
- NextJS 9 / Apollo Routing
- Multiple drop targets react-dropzone
- Using onBlur with JSX and React
- Sibling component not re-rerendering on state change (using useEffect, useState and Context)
- Redux: Props undefined
- minimise the code since I am using the same code only the content in p tags changes and component AccordionHeader header changes
- How to mock ref which type is MutableRefObject<HTMLElement>
- Calling api inside map