Am new to React and I have a project that am gonna use D3 to create my charts after installing it on my project and create this class:
import React, { Component } from 'react';
var ReactDOM = require('react-dom');
var LineChart = require('react-d3-basic').LineChart;
class TempChart extends Component{
constructor(){
super();
this.state={
generalChartData:{},
chartSeries:[],
x:0
}
}
componentWillMount(){
fetch("my JSON url was here")
.then(response=>response.json())
.then((findresponse)=>{
this.setState({
generalChartData:findresponse.feeds.map((feed, i) => parseFloat(feed.field1)),
chartSeries:[
{
field: 'age',
name: 'Age',
color: '#ff7f0e',
style: {
"stroke-width": 2,
"stroke-opacity": .2,
"fill-opacity": .2
}
}
],
x:function(d) {
return d.index;
}
})
})
}
render(){
return (
<LineChart
width= {600}
height= {300}
data= {this.state.generalChartData}
chartSeries= {this.state.chartSeries}
x= {this.state.x}
/>
);
}
}
export default TempChart;
but as results I get this error like this one
:
I know that after React version 15.5 you have to import PropTypes from prop-types like below:
import PropTypes from 'prop-types';
or
var PropTypes = require('prop-types');
Now my question is where I have import this, because all D3 files use the old PropType that causes the problem and there's a lot of files in D3 library I cant import the new one in every single one.
This is my package.json file:
{
"name": "d3app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.4.1",
"react-d3-basic": "^1.6.11",
"react-dom": "^16.4.1",
"react-scripts": "1.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
