score:1
welcome to stackoverflow.
your problems can be alleviated by ensuring that cafes is set to null by default. then in sidebar1.js
, i have added a truthy check to your filter that you used in the render method (cafeplaces && cafeplaces.filter...
). this means that the filter will only be executed if cafeplaces was successfully fetched in your parent component, where you fetch the data.
you will also need to update places.js
, as you use cafes in there too. i have also added an early return to the filtercafes
method as it will error out when you try filtering as not cafes were loaded into the parent state if the api called failed.
(p.s. please note i broke your api call on purpose in the example code provided below).
app.js
import react, { component } from "react";
import map from "./map";
import sidebar from "./sidebar1.js";
import "./app.css";
import header from "./header.js";
import footer from "./footer.js";
class app extends component {
state = {
cafes: null,
clickedcafe: {},
filteredcafe: []
};
// get the data for the cafes in watford and catch any errors from foursquare and map
componentdidmount() {
fetch(
"https://api.foursquare.com/v2/venues/search?ll=51.656489,-.39032&intent=browse&radius=10000&client_id=xqsxugir140awuvfjj120s31ipixqyio2qj2zn2u0zpllg4p&client_secret=a0n5p5vi4ng5uqk2gv2m0wu1fyy3kz0euyv0ymyzsx5ihhsu&v=26"
)
.then(response => response.json())
.then(data => {
this.setstate({
cafes: data.response.venues,
filteredcafe: data.response.venues
});
})
.catch(error => {
alert(
"an error occurred while trying to fetch data from foursquare: " +
error
);
});
window.gm_authfailure = () => {
alert("an error occurred while trying to load google map");
};
}
// update filtered list of venues
updatelist = filteredcafe => {
this.setstate({ filteredcafe });
};
// show the infowindow when a place is clicked
handleinfowindow = clickedcafe => {
this.setstate({ clickedplace: clickedcafe });
this.setstate({ menuhidden: false });
};
render() {
return (
<div classname="app" role="application" aria-label="map">
<header />
<map
cafes={this.state.filteredcafe}
clickedplace={this.state.clickedplace}
handleinfowindow={this.handleinfowindow}
/>
<sidebar
cafes={this.state.cafes}
handleinfowindow={this.handleinfowindow}
updatelist={this.updatelist}
menuhidden={this.state.menuhidden}
/>
<footer />
</div>
);
}
}
export default app;
sidebar1.js
import react, { component } from "react";
class sidebar extends component {
state = {
query: ""
};
//filter the cafes depending on the search
refreshquery = query => {
this.setstate({ query });
this.props.updatelist(this.filtercafes(this.props.cafes, query));
};
filtercafes = (cafes, query) => {
if (!cafes) {
return;
}
cafes.filter(cafe => cafe.name.tolowercase().includes(query.tolowercase()));
};
//cafes displayed in sidebar
render() {
const cafeplaces = this.props.cafes;
const typedquery = this.state.query;
const listcafes =
cafeplaces &&
this.filtercafes(cafeplaces, typedquery).map((cafe, idx) => {
return (
<li
key={cafe.id}
classname="cafe"
tabindex={0}
aria-label={cafe.name}
onclick={() => {
this.props.handleinfowindow(idx);
}}
onkeypress={() => {
this.props.handleinfowindow(idx);
}}
>
{cafe.name}
</li>
);
});
return (
<aside>
<div classname="sidebar">
<div classname="locations-list">
<input
type="text"
placeholder="search for a place"
aria-label="type to look for a cafe"
value={this.state.query}
onchange={e => this.refreshquery(e.target.value)}
/>
<ul aria-labelledby="cafe list">{listcafes}</ul>
</div>
</div>
</aside>
);
}
}
export default sidebar;
places.js
import react, { component } from "react";
import {
withscriptjs,
withgooglemap,
googlemap,
marker,
infowindow
} from "react-google-maps";
class map extends component {
render() {
const places = this.props.cafes;
const animateplace = this.props.clickedplace;
/* create google map app and markers, infowindow from foursquare api from https://github.com/tomchentw/react-google-maps/blob/master/src/docs/configuration.md
and https://tomchentw.github.io/react-google-maps/#infowindow and https://github.com/tomchentw/react-google-maps/issues/753 */
const style = {
height: "100%"
};
const stylemap = {
height: "600px",
width: "100%"
};
//define map with markers and infowindow then return it below to display within container div
const wmap = withscriptjs(
withgooglemap(props => (
<googlemap
defaultzoom={14}
defaultcenter={{ lat: 51.656489, lng: -0.39032 }}
>
{places &&
places.map((place, i) => (
<marker
key={i}
position={{ lat: place.location.lat, lng: place.location.lng }}
id={place.id}
name={place.name}
onclick={() => {
this.props.handleinfowindow(i);
}}
animation={
animateplace === i ? window.google.maps.animation.drop : null
}
>
{animateplace === i && (
<infowindow oncloseclick={props.ontoggleopen}>
<div
classname="infowindow"
tabindex={0}
aria-label="infowindow"
>
<h2>{place.name}</h2>
<hr />
<p>
<strong>address: </strong>
{place.location.formattedaddress[0]}
</p>
<p>{place.location.formattedaddress[1]}</p>
<p>{place.location.formattedaddress[2]}</p>
<p>{place.location.formattedaddress[3]}</p>
<p>{place.location.formattedaddress[4]}</p>
</div>
</infowindow>
)}
</marker>
))}
</googlemap>
))
);
return (
<div classname="map">
<div classname="wmap" role="application">
<wmap
googlemapurl="https://maps.googleapis.com/maps/api/js?key=aizasycfk8f7sikfjihxgfewargveisb31hwlwa&v=3.exp"
loadingelement={<div style={style} />}
containerelement={<div style={stylemap} />}
mapelement={<div style={style} />}
/>
</div>
</div>
);
}
}
export default map;
Source: stackoverflow.com
Related Query
- React Error Handling Fetch Data Venues List
- ERROR when fetch JSON data within the Multi-array in React JS?
- getting error : fetch errorSyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data in react ajax call
- react fetch data and render the error if any
- Unable to fetch data and React is not giving any error messages
- Error handling API fetch request with React
- What is the best way to deal with a fetch error in react redux?
- React useReducer async data fetch
- How to fetch data when a React component prop changes?
- Where do I fetch initial data from server in a React Redux app?
- How to fetch the new data in response to React Router change with Redux?
- React fetch data in server before render
- Error handling in React best practices
- Handling Axios error in React
- Handling response status using fetch in react JS
- React Custom Hooks fetch data globally and share across components?
- React - What's the best practice to refresh a list of data after adding a new element there?
- React list rendering wrong data after deleting item
- React Native: fetch request failed with error - TypeError: Network request failed(…)
- Fetch API error handling
- Why does react hook throw the act error when used with fetch api?
- Multiple fetch data axios with React Hooks
- How to fetch data and store in React Context API?
- React useEffect hook and Async/await own fetch data func?
- Should i fetch data in react component or redux action?
- Fetch api post call returning 403 forbidden error in React js but the same URL working in postman
- handling error response from express to react
- Apollo error handling - why react app crashes?
- Right way to fetch data with react using socket.io
- Detect bottom of page to fetch more data in react
More Query from same tag
- React - JSX conditional tags
- What's the meaning of mutation in React Documentation?
- Generate large dynamic forms with React, which do not re-generate on each input
- unable to do redirect from login to dashboard
- Frozen Columns jitter on horizontal scroll in react-data-grid
- Using third party library with react js giving error
- Some of icons in react-icon are giving import error
- How to record web/browser audio output (not microphone audio)
- support for the experimental syntax 'jsx' isn't currently enabled laravel 8
- How to remove react-cookie-consent bar when cookie exist?
- Uncaught TypeError: color is undefined || MUI Button & CreateTheme Issue
- How to build custom / dynamic routing in Next.js React Framework
- how to map to update an objects with setState in Reactjs
- onBlur and onChange Influence each other
- React startup ES2016
- Is it an efficient practice to add new epics lazily inside react-router onEnter hooks?
- How to add styles in tabs in react-bootstrap?
- Can't perform a React state update on an unmounted component implemented using HOOK
- How to select every event.target.value in a form
- React & Jest testing: nested component connected to Redux gives Invariant Violation error
- React play different audio files at once - working with different refs
- React.Children.only expected to receive a single React element child.?
- How to get user information from database when the only thing in client browser is the AuthToken?
- Lifecycle issue on axios call to an external API
- AWS S3 presigned url with React uploads empty file
- ReactJS - prevent re-render children
- How to use 'useParams()' inside of axios API Call?
- React, onMouseEnter event trigger all items instead of one hovered?
- How to specify the order of items in ReactCSSTransitionGroup?
- How to mock React component events with jest and enzyme