score:4
after working out the problem, it turned out that there was no problem with fetch
. it just didn't account for null
in any of the components in the program (it would crash after using a null
value.
for example in render:
render() {
if (this.state.data) {
return (
<div>
<sandkeygraph
height={300}
width={700}
id="d3-sankey"
sankeydata = {this.state.data}
/>
</div>
);
}
else {
return <div/>
}
}
or, the use of a ternary operator would work as well to be more concise (answer by @eliran):
return (
{this.state.data ?
<div>
<sandkeygraph
height={300}
width={700}
id="d3-sankey"
sankeydata = {this.state.data}
/>
</div> : <div>no data available</div>
);
score:0
...
class app extends react.component {
constructor(props) {
super(props)
this.state = {
data : null
}
}
it seems like an error on the state declaration?
score:0
1.- import your json in app component on top like this: import jsondata from './data/sankey.json'
2.- set jsondata in state jsondata in app component.
constructor(props) {
super(props)
this.state = {
jsondata : {}
}
}
componentwillmount() {
this.setstate({ jsondata })
}
you do not need to fetch as you have your json locally.
once you have your json in your state, you can display it in render like this for example:
this.state.jsondata.data.links.map(x=>
<div>
<div>x.links.source</div>
<div>x.links.target</div>
</div>
)
score:0
i've been testing and you need to replace the getdata() method to this:
getdata = (uri) => {
fetch(uri, {
headers : {
'content-type': 'application/json',
'accept': 'application/json'
}
})
.then((response) => {
return response.json();
})
.then((data) => {
// successful got the data
console.log(data);
this.setstate({ data });
});
}
this is because you need to declare 'content-type' and 'accept' headers on your fetch options in order to make your request.
score:1
you can add in your render function a condition:
render() {
// failed
const { data } = this.state;
return (
<div>
{data ?
<sandkeygraph
height={300}
width={700}
id="d3-sankey"
sankeydata={data}
/> : "loading..."
}
</div>
);
}
and only if data is populated the component will be rendered.
Source: stackoverflow.com
Related Query
- How to make React.js fetch data from api as state and pass this state data from its parent to child component
- How to fetch data from API and then pass it to another component in react after it is fully loaded?
- How to fetch data from api and pass it as props
- How to fetch and display data from Express API to a React app?
- How to use useEffect() to fetch data from an api in a useReducer() and useContext() state management setup?
- Best way to fetch data from a REST api using react hooks and context for state management?
- how to make api call from external file using axios and callbacks and pass param in react
- How to properly fetch data from several API calls and display it to the DOM in React
- How to activate a react route and pass data from the service worker?
- How to make the Service Worker cache data from API and update the cache when needed
- How can i get array of object from this data for state and count in reactjs
- How to Read image data from API and render in React Component
- How to fetch and display data from json file in react typscript
- how to set react parent component state by a async function and then pass this state to child as props?
- How do I correctly add data from multiple endpoints called inside useEffect to the state object using React Hooks and Context API?
- How to filter JSON data from API and setState in React
- React Redux how to pass data from input to rest api
- Easy Peasy state managment - How to fetch and pass data correctly?
- How to get React to re fetch my data from API after a POST or DELETE to Database?
- How to fetch data from a custom React hook (API) with onClick and display it in a Div using TypeScript?
- How do I display data from api using react and redux
- In React How to pass object using history.push from a component to child component and read data
- How to load and display data with React from an API running on localhost
- How to fetch data and make a route with the same endpoint React
- How to set the data from my API as initial state for my react component?
- How can I make this react component reusable and pass a dynamic initial state?
- Fetch data from api and rearrange it in react
- How to fetch sequence api calls where second api call need particular data from first api call result using react hooks?
- How to pass props or state from parent to child react in this format
- React App: How to display data from api using fetch
More Query from same tag
- React Select fails to focus inside Office UI Fabric Layer with TestCafe
- ReactJS Multiple arrow function
- How do I compare and render the data between several JSON maps in React?
- creating a unique array in Javascript
- Cannot read property 'setState' of null on button click
- Is there a way to set state for each iteration of a foreach
- Convert objectID or _id from MongoDB Stitch query to string and map it
- Copy and Paste rich text to mailto body in react from clipboard
- Testing nested functions in jest without return
- Apply onClick functions based on conditions within components React
- Dynamic handler assignment in useEffect does not show update state in the handler
- Jest not honoring mocking of imported modules
- How to update a clicked element using useState
- How to type a color prop?
- React component not updating values after element is deleted of specific index
- REACT Todo-List : How to check if an item already exist in the array
- How do we pass props to NavLink?
- How to hide Side Panel and the add data popup when the map is created?
- How do I compose redux connect and withCookies in my App?
- Cannot load LESS into page with webpack
- how to save the data from firebase I recently Created with axios and react?
- Semantic-UI / ReactJS | Use DropDown as group
- JSX mapping arrays stored inside a dynamic object (Next.js)
- How to resize the select component in grommet react js?
- How to pass data from one react component to other react component when clicking on <Link tag
- Can't render out an array inside the data of my state
- React authentication not able to redirect to the right page
- Rewriting JS to TS leads to weird errors when it comes to React.Context
- Updating react component text
- React CSS Transition Not Working On Exit Or Enter