title: How to re-render a react component depending on localstorage?
body: <p><strong>How can i make <code>&lt;FormList/&gt;</code> element re-render everytime i set a new localstorage item?</strong></p>
  <p>I have 2 sibling components like</p>
  <pre><code>class App extends React.Component{
    render(){
      &lt;div&gt;
        &lt;MakeForm/&gt;
        &lt;FormList/&gt;
      &lt;/div&gt;
    }
  }
  </code></pre>
  <p>What i am trying to do is simply</p>
  <ol>
  <li><strong>Create new form element with multiple inputs in it from <code>&lt;MakeForm/&gt;</code> component and set it to the localstorage (JSON format)</strong></li>
  <li><strong>Get new localstorage ıtem</strong></li>
  <li><strong>Display form name and a button in <code>&lt;FormList/&gt;</code> for each item in localstorage</strong></li>
  </ol>
  <p>I dont know if this helps or not but i am using <strong>react-router-dom</strong> module. My <code>&lt;MakeForm/&gt;</code> component and <code>&lt;FormList/&gt;</code> component has different URL's.</p>
  <pre><code>class MakeForm extends React.component{
    constructor(){
      super()
      this.state = {
      //Some properties 
    }
    }
    handleClick= () =&gt; {
      //Stringfy state's value and set localstorage item with it
    }
    render(){
      &lt;input type=&quot;submit&quot; onClick={this.handleClick} /&gt;
  
    }
  }
  </code></pre>
  <pre><code>class FormList extends React.Component{
    //Get the data from localstorage 
    render(){
      &lt;div&gt;
        &lt;p&gt;{/* Form name */}&lt;/p&gt;
        &lt;button&gt;{/* Show the form */}&lt;/button&gt;
      &lt;/div&gt;
    } 
  }
  </code></pre>
  <p>Every thing works just fine. But <code>&lt;FormList/&gt;</code> doesnt re-render. I need to refresh the page every time i make a new form in order to see new form element at home page.</p>
  <p><strong>How can i make <code>&lt;FormList/&gt;</code> element re-render everytime i set a new localstorage item?</strong></p>