I have a Parent component and a number of Child component that each load a value async from an API when they mount. I would like to display the total of these value in the Parent component. What's the best pattern for doing this in React?
export class Parent extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<>
<Child name='nick' />
<Child name='lucile' />
<Child name='buster' />
<span>{ TBD: Total of each Child's state.value ??? }</span>
</>
)
}
export class Child extends React.Component {
constructor(props) {
super(props);
this.state = { value: 0 }
}
async componentDidMount(){
let response = await axios.get(`https://getvaluefromapi/{this.props.name}`)
this.setState({value: response.data.value})
}
render() {
return (<span>{this.state.value}<span>)
}
}
import React from "react";
import Child from "../components/child";
class Parent extends React.Component {
//State
state = {};
getValue = (user, value) => {
this.setState({ [user]: value });
};
render() {
return (
<div>
<Child name="nick" getValue={this.getValue} />
<Child name="buster" getValue={this.getValue} />
<Child name="lucile" getValue={this.getValue} />
<div>{this.state.nick + this.state.buster + this.state.lucile}</div>
</div>
);
}
}
export default Parent;
import React, { Component } from "react";
class Child extends Component {
constructor(props) {
super(props);
this.state = {
value: 0,
};
}
async componentDidMount() {
let response = await axios.get(`https://getvaluefromapi/{this.props.name}`);
this.setState({ value: response.data.value });
this.props.getValue(this.props.name, response.data.value);
}
render() {
return <p>{this.state.value}</p>;
}
}
export default Child;
It's entirely your choice how you want to continue from here. You can either add them all up in a componentDidUpdate() to a total value. Or you display them added directly in the dom.
You can also pass a function directly from the parent element that would add the current totalValue with each independent value, however, I don't know if that would work due to sequencing and simultaneous renders of the child elements. If all children render at the same time you might get wrong values in the total value. However, I think that's how that option would look like.
import React from "react";
import Child from "../components/child";
class Parent extends React.Component {
//State
state = {
totalValue: 0,
};
getValue = (value) => {
this.setState({ totalValue: this.state.totalValue + value });
};
render() {
return (
<div>
<Child name="nick" getValue={this.getValue} />
<Child name="buster" getValue={this.getValue} />
<Child name="lucile" getValue={this.getValue} />
<div>{this.state.totalValue}</div>
</div>
);
}
}
export default Parent;
import React, { Component } from "react";
class Child extends Component {
constructor(props) {
super(props);
this.state = {
value: 0,
};
}
async componentDidMount() {
let response = await axios.get(`https://getvaluefromapi/{this.props.name}`);
this.setState({ value: response.data.value });
this.props.getValue(response.data.value);
}
render() {
return <p>{this.state.value}</p>;
}
}
export default Child;