Fetch data Component React

PHOTO EMBED

Tue Jun 29 2021 09:28:03 GMT+0000 (Coordinated Universal Time)

Saved by @hisam #array #destructuring #javasc #react.js

// This is what I've been using, pretty straight forward
// It passes the JSON to the children as props
// Of course, you fetch what you will
 
import React, { Component, Fragment } from 'react';
 
export class FetchJsonController extends Component
{
	constructor(props) {
		super(props);
		this.state = {
			data: null,
		};
	}
 
	componentDidMount() {
		fetch(this.props.src)
			.then(response => response.json())
			.then(data => {
				console.log(data);
				this.setState({ data })
			});
	}
 
	render() {
		const _data = this.state.data;
		const children = React.Children.map(this.props.children, child => {
			return React.cloneElement(child, {
				jsonData: _data
			});
		});
		return (
			<div>{ children }</div>
		)
	}
}
 
// This is how it's used
// SomeCompnent will receive the JSON data
<FetchJsonController src="somefile.json">
  <SomeComponent />
</FetchJsonController>
content_copyCOPY