State changes without setState on key - reactjs

Question

I'm (very) new to React and am building a small web page as part of my learning process. My web page is a table of currencies (given using an API) and I should be able to delete and add currencies and revert to the table's original state.
Deleting as many as I want and then reverting a first time works fine. When I delete and then revert a second time - nothing happens.
My App's state has a 'shownData' attribute, holding the data currently presented in the table, and an 'initialData' attribute, holding the original data I should present when clicking 'revert'.
From my debugging process, it seems that clicking the 'revert' button ties 'initialData' to 'shownData', so that when reverting a second time nothing happens.
Here's the code for my main App component:
import React, { Component } from 'react';
import CurrencyTable from './currencyTable';
import SearchBar from './searchBar';
// import _ from 'lodash';
import RevertButton from './revertButton';
import logo from './logo.svg';
import './App.css';
import './bootstrap.min.css';
const API_KEY = '7312269b011ac267b5d9663c4a479c24';
const endpoint = 'latest';
class App extends Component {
constructor(props){
super(props);
this.state={
shownCountries: [],
initialCountries: [],
allData: [],
shownData:[],
initialData:[],
value:'',
}
}
componentDidMount(){
this.setState({shownCountries: ['EUR', 'ILS', 'USD', 'GBP', 'AUD']});
this.setState({initialCountries: ['EUR', 'ILS', 'USD', 'GBP', 'AUD']});
// localStorage.setItem('shownC', JSON.stringify(this.shownCountries));
const cachedCountries = localStorage.getItem('shownC');
if (!cachedCountries)
localStorage.setItem('shownC', JSON.stringify(this.state.shownCountries));
else
this.setState({shownCountries: JSON.parse(cachedCountries)});
fetch(`http://data.fixer.io/api/${endpoint}?access_key=${API_KEY}`)
.then(results => {
return results.json();
})
.then(result => {
let rates = result.rates;
let shownData = [];
let initialData = [];
let allData = [];
let i = 0;
let j = 0;
let k = 0;
//check for saved data in local storage:
Object.keys(rates).forEach(key => {
if (this.state.shownCountries.indexOf(key) > -1){
shownData[j] = {rate: key, value: rates[key], button: "btn btn-danger red"};
j++;
}
if (this.state.initialCountries.indexOf(key) > -1){
initialData[k] = {rate: key, value: rates[key], button: "btn btn-danger red"};
k++;
}
allData[i] = {rate: key, value: rates[key], button: "btn btn-danger red"};
i++;
})
this.setState({allData: allData, initialData: initialData, shownData: shownData});
})
}
findValue(rate){
for (let i=0; i<this.state.allData.length; i++){
if (this.state.allData[i].rate === rate)
return this.state.allData[i].value;
}
}
handleChangeValue = value => {
let newRateObj = {rate: value, value: this.findValue(value), button: "btn btn-danger red"};
this.setState({
shownData: this.state.shownData.concat([newRateObj])
});
this.state.shownCountries.concat([value]);
localStorage.setItem('shownC', JSON.stringify(this.state.shownCountries));
}
handleRevertClick = () => {
console.log(this.state.initialData);
localStorage.setItem('shownC', JSON.stringify(this.state.initialCountries));
this.setState({shownData: this.state.initialData});
console.log(this.state.initialData);
};
saveToLocalStorage(data) {
localStorage.setItem('shownC', JSON.stringify(this.getShownCList(data)));
}
getShownCList(data){
let shownC = [];
for (let i=0;i<data.length;i++){
shownC.push(data[i].rate);
}
// console.log(shownC);
return shownC;
}
render() {
console.log("initialData is:");
console.log(this.state.initialData);
if (this.state.initialData.length===0)
return 'loading...';
return (
<div className="headDiv">
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Niki's React Currency App</h1>
</header>
</div>
<div className="mainDiv">
<div className="col">
<div className="col-lg-6 currencyTableContainer">
<CurrencyTable
data = { this.state.shownData }
saveToLS= {(data) => {
this.saveToLocalStorage(data)}}/>
</div>
<div className="col-lg-6 searchAndRevertContainer">
<div className="row">
<div className="row-md-4">
<SearchBar
value={this.state.value}
allData = { this.state.allData }
onChangeValue={this.handleChangeValue}/>
</div>
<div className="row-md-4 revertButton">
<RevertButton
onClick={this.handleRevertClick}/>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default App;
And here's the code for the onClick function in the table component, that deletes a row (after which initialData seems to go wrong):
onRemoveClick(rate){
const newShownData = this.state.myTableData;
let index = _.findIndex(newShownData, {rate: rate});
if (index>-1)
newShownData.splice(index, 1);
this.setState({myTableData: newShownData});
this.props.saveToLS(this.state.myTableData);
}
I'm super lost, help? :)

Answer 1

Solved by creating a deep copy of initialData before giving its value to shownData:
...
var temp = JSON.parse(JSON.stringify(this.initialData))
this.setState({shownData: temp});
...