title: how can I display child details on button click
body: <pre><code>App.js-
  
  class App extends Component{
    render(){
      const data= [
        {
          id: 1,
          name: &quot;John Smith&quot;,
          email: &quot;jsmith@test.com&quot;,
          phone: &quot;123456789&quot;,
          details:&quot;john smith details&quot;
          
        }, 
        {
          id: 2,
          name: &quot;ABCD&quot;,
          email: &quot;abcd@test.com&quot;,
          phone: &quot;987654321&quot;
        },
         {
          id: 3,
          name: &quot;Tyrion&quot;,
          email: &quot;tyrion@test.com&quot;,
          phone: &quot;123412345&quot;
        },
        ];
    return(
       &lt;div &gt;
        &lt;Customers item={data}  /&gt;
       &lt;/div&gt;
       
    )
    }
  }
  export default App;
  
  Customer.js-
  
  class Customers extends Component{
      constructor(props) {
          super(props);
          this.state = {};
        }
           handleclick= (datalist) =&gt; {
              this.setState({
  })
       }
      render(){
          const item = this.props.item
           //uses map method 
          const newarray=item.map( (cval)=&gt;{
              return(
              &lt;div&gt;
            &lt;h1&gt;{cval.name}&lt;/h1&gt; 
              &lt;p&gt;{cval.email}&lt;/p&gt;
              {cval.phone}
              &lt;div&gt;
                  &lt;button type='submit' onClick={()=&gt;this.handleclick(cval.id)}&gt;Click to view Details&lt;/button&gt;
              &lt;/div&gt;
              &lt;/div&gt;
              
              )
            })
          return(
              &lt;div&gt;
                  {newarray}
                  &lt;CustomerList /&gt;
              
              &lt;/div&gt;
          )
      }
  }
  export default Customers;
  
  CustomerList.js-
  
  class CustomerList extends Component{
      render(){
       const datalist=  [
       {
              id: 1,
              name: &quot;John Smith&quot;,
              email: &quot;jsmith@test.com&quot;,                                       
              phone: &quot;123456789&quot;,
              city: &quot;bangalore&quot;,
              state: &quot;karnataka&quot;,
              country: &quot;India&quot;,
              organization: &quot;Company 1&quot;,
              jobProfile: &quot;Software Developer&quot;,
              additionalInfo: &quot;Has Bought a lot of products before and a high Valu Customer&quot;
          },
          {
              id: 2,
              name: 'ABCD',
              email: &quot;abcd@test.com&quot;,
              phone: &quot;987654321&quot;,
              city: &quot;Mangalore&quot;,
              state: &quot;karnataka&quot;,
              country: &quot;India&quot;,
              organization: &quot;Company 2&quot;,
              jobProfile: &quot;Software Developer&quot;,
              additionalInfo: &quot;Buys Products Rarely&quot;
          },
          {
              id: 3,
              name: &quot;Tyrion&quot;,
              email: &quot;tyrion@test.com&quot;,
              phone: &quot;123412345&quot;,
              city: &quot;Chennai&quot;,
              state: &quot;Tamil Nadu&quot;,
              country: &quot;India&quot;,
              organization: &quot;Company 3&quot;,
              jobProfile: &quot;Software Developer&quot;,
              additionalInfo: &quot;Buys Lots of Products in general&quot;
          }
      ]
      const newarraydata= datalist.map((val)=&gt;{       
          return(
              &lt;div&gt;
                  {val.name}
                  {val.email}
                  {val.phone}
                  {val.city}
                  {val.state}
                  {val.country}
                  {val.organization}
                  {val.jobProfile}
                  {val.additionalInfo}
              &lt;/div&gt;
          )
      })
          return(
                  
              &lt;div&gt;
                 {newarraydata}
              &lt;/div&gt;
  
          )
      }
  }
  export default CustomerList;
  </code></pre>
  <p>Firstly, I want to display this Customer List details whenever user clicks the button. secondly i dont know what to pass in this.setstate inside handleclclick. I am able to render it normally on screen but don't know how to render it on button click. I am a beginner in reacjs. Your help must be appreciated.</p>