React - populate component prop with data from HTTP endpoint - reactjs

Question

I’m a beginner with React, working on building my first real form after taking a few online classes.
I have a form that I use to record work unit goals and the daily “score” toward those goals. The form is working fine and data is arriving properly in my database. At the bottom of the form, I want to display the running total score for today.
I’m able to pull in my component that’s supposed to display the score, but I just can’t quite figure out how to populate that score component with the actual score value. I’ve tried numerous different methods of updating the “totalToday” value in state.data so that value will then be available as a prop. So far, nothing has worked.
Here’s my form file (with quite a bit of the irrelevant other code removed). You can see at the bottom of the form that I’m pulling in the “TotalToday” component and trying to send it the “totalToday” value as a prop.
import React from "react";
import Form from "./common/form";
…
import TotalToday from "./totalToday";
class FormProject extends Form {
state = {
data: {
inpDate: "",
selTeam: "",
selGoal: "",
selProject: "",
inpScore: "",
totalToday: ""
},
teams: [],
goals: [],
projects: []
};
async componentDidMount() {
await this.populateTeams();
await this.populateGoals();
await this.populateProjects();
}
doSubmit = async () => {
await saveScore(this.state.data);
this.setState({
data: {
inpDate: "",
selTeam: "",
selGoal: "",
selProject: "",
inpScore: "",
totalToday: ""
}
});
};
render() {
return (
<div>
<h1>Team Scorecard</h1>
<form onSubmit={this.handleSubmit}>
…
{this.renderButton("Save")}
</form>
<TotalToday totalToday={this.state.data.totalToday} />
</div>
);
}
}
export default FormProject;
Here’s my “TotalToday” component file –
import React from "react";
const TotalToday = ({ totalToday }) => {
return (
<div className="alert alert-primary mt-2" role="alert">
Total Time Today: {totalToday}
</div>
);
};
export default TotalToday;
Finally, here’s my “reportService.js” file that grabs the running total from my Express / Node backend. Note that my GET request works just fine in Postman, returning today’s total, so I know the back-end setup is working, at least –
import http from "./httpService";
import { apiUrl } from "../config.json";
export function getTotalToday() {
return http.get(apiUrl + "/report");
}
And here’s the layout of the data I’m getting back from my GET request –
[
{
"scoreTotalToday": 85
}
]
As I said at the top, I’ve tried all kinds of different ways of updating the state.data.totalToday data point in my form file and haven’t been able to make it work yet. What am I missing here?
Thanks in advance for your help!
Joel

Answer 1

I think your first step is to use axios.
I would write it like this and do it on componentDidMount lifecycle method.
componentDidMount() {
axios.get(apiUrl + "/reports")
.then(res => {
const totalToday = res.data;
this.setState({ totalToday });
})
}
I would also change the state object to
state = {
key : "someString",
key : [someArray]
}
Also I would delete the data : in your state object, it adds another step when locating the data you are looking for. Without the api to test it can't confirm this fixes everything, but this should get you on the right track. I think missing axios is the primary fix needed.

Answer 2

With a key assist from Josh above, I was able to solve my own problem and now have today’s total score showing up below my form!
Here are the changes I made.
First, I really just had to come to grips with the fact that I’m getting an array back, even though it’s an array that will only ever have one element. I come from a database background, so I was just locked in on the idea that I’d have one “cell” of data, which would be the total itself. But it’s still a key-value pair array, even though it’s just a one-element array.
So, I changed my state object in the form to move “totalToday” from the “data” section into the array section where I pull in the values for my selection boxes:
state = {
data: {
inpDate: "",
selTeam: "",
selGoal: "",
selProject: "",
inpScore: ""
},
teams: [],
goals: [],
projects: [],
totalToday: []
};
I then added back to my form file a helper function that I wasn’t sure I needed before –
async updateTotalToday() {
const { data: totalToday } = await getTotalToday();
this.setState({ totalToday });
}
Which I then added to my “doSubmit” function (as well as my componentDidMount lifecycle hook) so that that total will update every time I submit a new record (note that, again, I removed “totalToday” from the “data” section of the state update) –
doSubmit = async () => {
await saveScore(this.state.data);
this.setState({
data: {
inpDate: "",
selTeam: "",
selGoal: "",
selProject: "",
inpScore: ""
}
});
await this.updateTotalToday();
};
Then, at the bottom of my form, I just sent the entire array object as a prop to my component file (so, I removed the word “data” from my previous approach) –
{this.renderButton("Save")}
</form>
<TotalToday totalToday={this.state.totalToday} />
</div>
Finally, I added array mapping to my “TotalToday” component file. This is ultimately the most important piece to the whole solution –
import React from "react";
const TotalToday = ({ totalToday }) => {
return (
<div className="alert alert-primary mt-2" role="alert">
{totalToday.map((score, index) => (
<p key={index}>Total today: {score.scoreTotalToday}</p>
))}
</div>
);
};
export default TotalToday;
Thanks again to Josh for the help. I hope my struggle through this solution helps someone else!
Joel