Just a quick look, I would guess this is classic React rendering multiple times, causing the odd output. React does not benefit this use case…at all, from what I can see.
Also, it is quite odd having async methods, and binding them outside of the constructor:
async getEducationData(){
let response=await fetch(educationUrl);
let json= await response.json();
this.setState({
educationData:json
});
this.getCountyData=this.getCountyData.bind(this);
this.getEducationData=this.getEducationData.bind(this)
}
Originally, I would not have expected any output to show, because of the logic in the render method relying on the return of itself. Again, React is not leveraged in this project.
Otherwise, stick some console.logs throughout the sections to see what is run when.
Hi and thanks for your time,
I have done all my data visualization projects with React including the async methods, so It’s normal those work and that was not really the issue I think.
The point wass not to learn to do the project without React, but to do the project and at the same time learn a little bit more about React, for example knowing why does the legend display twice for no reason.
What exactly do you mean with “React is not leveraged in this project”?
Should I use it differently or not at all? And what if I wanted/needed to use d3 with front-end framework?
I am glad you are taking the opportunity to learn and practice these skills. It is just, currently, the app basically contains React boilerplate, with HTML…no JSX which is a main feature of React.
A major reason a developer might choose to use React is to help reduce the amount of code they need to write. This is mainly done by:
Creating and reusing multiple components. Create once, use many times.
Throw a lot of JSX into your components:
// This is a silly example. The fCC React course covers common use cases
<>
{aBunchOfStuffIDoNotWantToHardCode.map(stuff => {
return (<>{stuff.moreStuff}</>)}
</>
Another main feature of React is state. In the app, the only state is the data the app fetches once upon mount. React is designed to work around state by rendering/re-rendering based on state changes. Your app’s state never really changes. So, you might as well not use it.
As this project stands, I would say not at all. It is why I specifically did not use React when I did it. You are introduced to the idiosyncrasies of React (eg. It tends to re-render frequently), and it is useful to know this, but all it is doing, in this project, is causing bugs and confusion.
Remember, another main technology you are taught is AJAX. This is what is expected of most/all of the Data Visualisation Projects.
All that said, please feel free to keep using React in this project. I would just argue that there is not much scope for campers to be learning it well within this section of the course. I cannot think of a way to leverage React here.
Hi @sdbondt. I am afraid @Sky020 is right. Knowing when to use react and when not to use it is also very important. Your code for creating the map is in the render method. Essentially your component, I believe, is rendered twice. On mount and after fetching the data and updating state. If you check in the console there are four svgs.
The first two are created on mount and the last two after updating state and re-rendering the component. The reason why your map is displaced down is because of the first two svgs. First with a class of svg followed by another with id of legend.
I assume the svgs you need are the last two. The ones rendered after the data has been fetched and state update. If you want to remove the first two svgs, add the following line of code after destructuring this.state so that you don’t execute the code which creates the map on mount before fetching the data.
Thank you both for your time.
The reason I wanted to do this with React, was to learn more about that aswell, since your last suggestion solved both my problems, I did just that and will be able to do this on my own a next time.
Also, it’s good to hear I have not been using React 100% correctly, since nobody else was doing it this way, I had to come up with myself.