title: onclick show and hide data in react.js
body: <p>i have component which is showing data in the webpage 
   I want to write another component and create buutton in it. which just hide other component on clicking the button and show basic input field form.</p>
  
  <p>My code is something like this</p>
  
  <p>component app</p>
  
  <pre><code>    class  App extends React.Component{
  
      constructor(props) {
         super(props);
        this.state= {
          filter: null,
          };
         this.setFilter = this.setFilter.bind(this);
  
       }
  
      setFilter(filter) {
         this.setState({filter: filter})
      }
  
  
       render(){
  
  
         let filteredPassword = details_data.filter(
          (detail) =&gt;{
              console.log(detail.website.toLowerCase(), this.state.filter)
              return detail.website.toLowerCase().indexOf(this.state.filter)!= -1;
          }
         );
  
         return (
  
          &lt;ul&gt;
              &lt;Filter onUpdateFilter={this.setFilter} /&gt;
              {
                  filteredPassword.map((detail)=&gt;{
                      return &lt;Detail item={detail}
                      key={detail.id}/&gt;
                  })
              }
  
          &lt;/ul&gt;
  
       )
     }
  }
  </code></pre>
  
  <p>Another Detail component 
        class Filter extends React.Component{</p>
  
  <pre><code>constructor() {
      super();
      this.state={
          search: 'Search'
        }
    }
  
     updateSearch(event) {
      this.props.onUpdateFilter(event.target.value.substr(0,40))
    }
  
     formShow(){
  
     }
  
    render() {
  
      return (
          &lt;div&gt;
  
              &lt;input id="search" type="text" placeholder={this.state.search} onChange={this.updateSearch.bind(this)}/&gt;
              &amp;nbsp; &amp;nbsp;&amp;nbsp; &amp;nbsp;
              &lt;input id="button1" type="button" value="+" onClick={this.formShow()}/&gt;
  
  
          &lt;/div&gt;
         )
     }
   }
  </code></pre>
  
  <p>Few other component like this.</p>
  
  <p>i am trying to hide the table and form button above is used to "show form" button.</p>
  
  <pre><code>  class Form extends React.Component {
  
  
  
      render() {
  
        return(
          &lt;div&gt;
          &lt;form&gt;
  
              &lt;input type="text" placeholder="username" /&gt;
              &lt;input type="password" placeholder="username" /&gt;
  
          &lt;/form&gt;
            &lt;/div&gt;
        )
  
  
     }
   }
  </code></pre>
  
  <p>Guide me how to do this.. thank you</p>