title: Conditionally render elements in React JS?
body: <p>I have a child component which i am looping over array to print out title and values. I have an event listener which renders a new row of title and values. I have a button in child component which i want do not want to be displayed by default but rendered only when i add new rows. So every 2 rows, there will be one button, for every 3, there will be 2 and so on. </p>
  
  <p>This is my app.js file</p>
  
  <pre><code>import React, {Component} from 'react';
  import './App.css';
  import Child from './Child.js'
  
  class App extends Component {
     state = {
        myArray: [
         { title: 'Hello', value: 'hello' }
       ]
     }
  
   addNewField = () =&gt; {
      const myArray = [...this.state.myArray, { title: 'Hello', value: 'hello' }]
       this.setState ({
      myArray
    })
  }
  
  render() {
    return (
      &lt;div className = "App"&gt;
     {
      this.state.myArray.map ( (val,idx) =&gt; {
        return (
          &lt;Child
          key = {idx}
          title = {val.title}
          animal = { val.value }
          /&gt;
        )
      })
    }
    &lt;button onClick = {this.addNewField}&gt;Add Me&lt;/button&gt;
  &lt;/div&gt;
     )
   }
  }
  export default App;
  </code></pre>
  
  <p>This is the setup for my Child Component:-</p>
  
  <pre><code>import React from 'react'
  
  const Child = (props) =&gt; {
    return (
       &lt;div&gt;
          &lt;h3&gt;{props.title}&lt;/h3&gt;
          &lt;h4&gt;{props.value}&lt;/h4&gt;
          &lt;button&gt;New Block!!&lt;/button&gt;
      &lt;/div&gt;
     )
  }
  
   export default Child
  </code></pre>
  
  <p>So basically the button in the Child component named <code>new block</code> should not be displayed by default but only after every click there after. Thank you.</p>