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;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.