title: React updating array dynamically and passing it to child component
body: <p>I have array in parent component that I need to update dynamically after reading some JSON from api.
  I'm using react router and I'm able to pass the array to child component and add a css class based on the array values but I can't seem to figure out how to properly update my array and change array value of panelone to off.</p>
  
  <p>Parent component:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Route, NavLink, HashRouter } from "react-router-dom";
  import Child from './components/Child';
  
  class App extends Component {
  
    arr = {
      panelone : 'on',
      paneltwo: 'off'
    };
  
    componentDidMount() {
      // Some function to get JSON... 
        this.arr.panelone = 'off'; // ???
      //...
    }
  
    render() {
  
      return (
        &lt;div className="App"&gt;
          &lt;TopBar /&gt;
          &lt;HashRouter&gt;
            &lt;div&gt;
              &lt;nav&gt;
                &lt;ul className="header"&gt;
                  &lt;li&gt;&lt;NavLink exact to="/"&gt;Overview&lt;/NavLink&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/nav&gt;
              &lt;div className="main-container"&gt;
                &lt;Route 
                  exact path="/" 
                  render={(props) =&gt; &lt;Child arr = {this.arr} /&gt;} 
                /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/HashRouter&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Child component: </p>
  
  <pre><code>import React, { Component } from 'react';
  import { Link } from "react-router-dom";
  
  class Child extends Component {
  
    render() {
  
      return (
        &lt;div&gt;
        //This is working OK and css class "on" is added from panelone val
                  &lt;div className={'item ' + this.props.arr.panelone}&gt;
                    &lt;p&gt;Some Title&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
      );
    }
  }
  
  export default Child;
  </code></pre>
  
  <p>What is the proper way to update arr dynamically and update child components while using react router?</p>