Passing props to child doesn't make him update - React Native - reactjs

Question

I am writing because I can't figure why one of the two childs Graph.js won't update after I udpate the state of the parent Data.js (throught a "lift up" via the second child Bouton.js).
I feel giga dumb and it's been now hours, I'm desperate...
I am trying to display charts with buttons above to choose a period of time for the chart (day, week, month). Clicking the button can change the state of the parent but I can't make the child Graph to update. I know I am doing something wrong.
Parent: Data.js
export default class Data extends React.Component {
constructor(props) {
super(props);
this.state = { periode: "Jour" };
}
handleClick(p) {
this.setState({
periode: p
});
}
render() {
console.log(this.state);
return (
<View>
<Boutons
onClick={res => this.handleClick(res)}
cursor={this.state.periode}
/>
<Graph periode={this.state.periode} dataType="temp" />
<Graph periode={this.state.periode} dataType="press" />
</View>
);
}
}
Child 1 (everything seems fine)
export default class Boutons extends React.Component {
constructor(props) {
super(props);
}
_getNextEntryTime() {
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
var res;
if (m >= 30) {
res = (h + 1).toString() + ":00";
} else {
res = h.toString() + ":30";
}
return res;
}
//Gestion de la selection des boutons
_boutonStyle(periode) {
if (this.props.cursor == periode) {
return {
// backgroundColor: "#9c9c9c",
borderBottomWidth: 3,
borderColor: "#728FB5",
width: Dimensions.get("window").width / 3 - 10,
height: 30,
alignItems: "center",
justifyContent: "center"
};
} else {
return {
backgroundColor: "#dfdfdf",
width: Dimensions.get("window").width / 3 - 10,
height: 30,
borderRadius: 2,
alignItems: "center",
justifyContent: "center"
};
}
}
_textStyle(periode) {
if (this.props.cursor == periode) {
return { color: "#728FB5" };
} else {
return { color: "black" };
}
}
render() {
return (
<View style={styles.container}>
<View style={styles.container_top}>
<View style={styles.rect}>
<Text style={styles.text_top}>
Prochain relevé: {`\n`}
<Text style={styles.numbers}>{this._getNextEntryTime()}</Text>
</Text>
</View>
<Single />
</View>
<View style={styles.container_buttons}>
<TouchableOpacity
style={this._boutonStyle("Jour")}
onPress={() => this.props.onClick("Jour")}
>
<Text style={this._textStyle("Jour")}>Jour</Text>
</TouchableOpacity>
<TouchableOpacity
style={this._boutonStyle("Semaine")}
onPress={() => this.props.onClick("Semaine")}
>
<Text style={this._textStyle("Semaine")}>Semaine</Text>
</TouchableOpacity>
<TouchableOpacity
style={this._boutonStyle("Mois")}
onPress={() => this.props.onClick("Mois")}
>
<Text style={this._textStyle("Mois")}>Mois</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
Graph.js Child 2 that won't update, nothing is happening
class Graph extends React.Component {
constructor(props) {
super(props);
this.state = { isLoading: true, data: [], format_const: null };
}
// Chargement de la page et recherche des entrys
componentDidMount() {
const entrys = getEntry(this.props.periode);
entrys.then(reponse => {
reponse.map(donnee => {
this.setState({
data: this.state.data.concat(donnee[this.props.dataType])
});
});
this.setState({
format_const: Config.CHART[this.props.dataType],
isLoading: false
});
});
}
// Affichage du loading
_displayLoading() {
if (this.state.isLoading) {
return (
<View style={styles.loading_container}>
<ActivityIndicator size="large" />
</View>
);
}
}
_displayChart() {
return (
<LineChart
data={{
datasets: [
{
data: this.state.data,
strokeWidth: 2 // optional
}
],
legend: [this.state.format_const["label"]]
}}
width={Dimensions.get("window").width - 10} // from react-native
height={220}
withInnerLines={false}
yAxisSuffix={this.state.format_const["alert"]}
onDataPointClick={({ value, dataset, getColor }) =>
Alert.alert(`${value}` + this.state.format_const["alert"])
}
chartConfig={{
backgroundGradientFrom: this.state.format_const["color"],
backgroundGradientTo: this.state.format_const["color"],
decimalPlaces: 0, // optional, defaults to 2dp
color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
style: {
borderRadius: 16
},
propsForDots: {
r: "2"
}
}}
bezier
style={{
marginVertical: 10,
borderRadius: 16
}}
/>
);
}
render() {
if (!this.state.isLoading) {
return <View>{this._displayChart()}</View>;
} else {
return <View>{this._displayLoading()}</View>;
}
}
}

Answer 1

It appears that your only use of the prop periode is in the componentDidMount method of Graph. So at mount time, Graph reads what the prop is, and then sets the state, which is used in the Graph render method. But when the parent component changes its state, and the new value for this.state.periode is passed as a prop to Graph, Graph doesnt doesn't necessarily know what to do with this updated information. So you'll need to use a componentDidUpdate statement to read new props coming in from the parent's state:
componentDidUpdate(prevProps){
if (prevProps.periode !== this.props.periode){
const entrys = getEntry(this.props.periode);
entrys.then(reponse => {
reponse.map(donnee => {
this.setState({
data: this.state.data.concat(donnee[this.props.dataType])
});
});
});
}
}
I'm assuming you want the same thing to happen in `componentDidMount` as is happening in `componentDidUpdate`, but you may need to change the code within `componentDidUpdate` to whatever you need.