Child Component does not refresh when List Array is updated - reactjs

Question

I am new to React and I've ran into a problem where I am updating an array list in my app component from a function that is called from user input. This is working fine but there is a child component that is get's the content of that list and maps it to buttons that it displays. My problem is then the list is updated in in the app component it the child component dose not update.
This is the code for my app component:
import React from 'react';
import './App.scss';
import DiceSelector from "./components/DiceSelector";
import ListOfDiceTypes from "./shared/list-available-dice";
const DiceToRollList = [];
const RolledTotal = 45;
DiceToRollList.push(ListOfDiceTypes[4]);
DiceToRollList.push(ListOfDiceTypes[4]);
DiceToRollList.push(ListOfDiceTypes[3]);
export default class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="App">
<header className="App-header">
<div className="Dice-Box">
<h2>Select Dice to Roll</h2>
{ListOfDiceTypes.map((dice, index) => (
<DiceSelector
key={"typeList" + index}
dicetype={dice.dicetype}
imagename={dice.imageName}
maxvalue={dice.maxvalue}
onClick={AddDieClick}
/>
))}
</div>
<div className="Dice-Box">
<h2>Selected Dice</h2>
{DiceToRollList.map((dice, index) => (
<DiceSelector
key={"SelectedList" + index}
dicetype={dice.dicetype}
imagename={dice.imageName}
maxvalue={dice.maxvalue}
onClick={RemoveDieClick}
/>
))}
<h3>Total Rolled = {RolledTotal}</h3>
</div>
</header>
</div>
);
}
}
And here is my child component:
import React from "react";
export default class DiceSelector extends React.Component {
constructor(props) {
super(props);
}
render() {
return <button
className="number"
onClick={() => this.props.onClick(this.props.dicetype)}
>
<img src={require(`../images/${this.props.imagename}`)} alt={this.props.imagename} />
</button>
}
}

Answer 1

You can store key in state of App component and use different key each time when you update props that you are going to pass child component at
<DiceSelector
key= { this.state.key+ offset + index} // insted of {"typeList" + index}
dicetype={dice.dicetype}
imagename={dice.imageName}
maxvalue={dice.maxvalue}
onClick={AddDieClick} // or onClick={RemoveDieClick}
/>
// offset is used to escape duplicate elements next time when child component will render
// offset is the length of the array on that you are mapping
You can add logic of update of key in clickHandler methods
This will rerender the child component.
Or you can use componentWillReceiveProps method to update the state of child component when props changes.

Answer 2

I had a couple of things wrong here. I realized that I did not need the child to refresh when I updated the list I needed the app component to refresh. Also I had functions outside of the app class declared as function functionName(){} rather than in the class as functionName = () = {}. This was keeping me from properly accessing this.state. Finally I was binding to the DiceToRollList rather than this.sate.DiceToRollList. Here is how I updated the app component.
import React, { Component } from 'react';
import './App.scss';
import DiceSelector from "./components/DiceSelector";
import ListOfDiceTypes from "./shared/list-available-dice";
const DiceToRollList = [];
const RolledTotal = 45;
DiceToRollList.push(ListOfDiceTypes[4]);
DiceToRollList.push(ListOfDiceTypes[4]);
DiceToRollList.push(ListOfDiceTypes[3]);
const offset1 = 100;
const offset2 = 500;
export default class App extends Component {
constructor(props) {
super(props);
this.state = { DiceToRollList }
}
render() {
return (
<div className="App">
<header className="App-header">
<div className="Dice-Box">
<h2>Select Dice to Roll</h2>
{ListOfDiceTypes.map((dice, index) => (
<DiceSelector
key={ListOfDiceTypes.length + index} // insted of {"typeList" + index}
dicetype={dice.dicetype}
imagename={dice.imageName}
maxvalue={dice.maxvalue}
onClick={this.AddDieClick}
/>
))}
</div>
<div className="Dice-Box">
<h2>Selected Dice</h2>
{this.state.DiceToRollList.map((dice, index) => (
<DiceSelector
key={this.state.DiceToRollList.length + offset2 + index} // insted of {"dieToRollList" + index}
dicetype={dice.dicetype}
imagename={dice.imageName}
maxvalue={dice.maxvalue}
onClick={this.RemoveDieClick}
/>
))}
<h3>Total Rolled = {RolledTotal}</h3>
</div>
</header>
</div>
);
}
// Functions
AddDieClick = (diceType) => {
let RowToAdd = ListOfDiceTypes.findIndex(obj => {
return obj.dicetype === diceType
});
DiceToRollList.push(ListOfDiceTypes[RowToAdd]);
this.reSetState();
}
reSetState = () => {
this.setState({ DiceToRollList });
};
RemoveDieClick = (diceType) => {
let DieToAdd = DiceToRollList.findIndex(obj => {
return obj.dicetype === diceType
});
DiceToRollList.splice(DiceToRollList[DieToAdd], 1);
this.reSetState();
}
}