CODEWITHSUNDEEP
javascriptreactjs
Somethingwhatever
Somethingwhatever

Reputation: 1348

Conditionally render elements in React JS?

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.

This is my app.js file

import React, {Component} from 'react';
import './App.css';
import Child from './Child.js'

class App extends Component {
   state = {
      myArray: [
       { title: 'Hello', value: 'hello' }
     ]
   }

 addNewField = () => {
    const myArray = [...this.state.myArray, { title: 'Hello', value: 'hello' }]
     this.setState ({
    myArray
  })
}

render() {
  return (
    <div className = "App">
   {
    this.state.myArray.map ( (val,idx) => {
      return (
        <Child
        key = {idx}
        title = {val.title}
        animal = { val.value }
        />
      )
    })
  }
  <button onClick = {this.addNewField}>Add Me</button>
</div>
   )
 }
}
export default App;

This is the setup for my Child Component:-

import React from 'react'

const Child = (props) => {
  return (
     <div>
        <h3>{props.title}</h3>
        <h4>{props.value}</h4>
        <button>New Block!!</button>
    </div>
   )
}

 export default Child

So basically the button in the Child component named new block should not be displayed by default but only after every click there after. Thank you.

Upvotes: 0

Views: 44

Answers (1)

GiorgiosJames
GiorgiosJames

Reputation: 1040

Add a prop to the parent with the index of the map loop. Then add a flag so only children rendered after the first get the "New Block!!" button:

render() {
  return (
    <div className = "App">
   {
    this.state.myArray.map ( (val,idx) => {
      return (
        <Child
        key = {idx}
        title = {val.title}
        animal = { val.value }
        renderIndex = {idx}
        />
      )
    })
  }
  <button onClick = {this.addNewField}>Add Me</button>
</div>
   )
 }
}

import React from 'react'

const Child = (props) => {
  return (
     <div>
        <h3>{props.title}</h3>
        <h4>{props.value}</h4>
        {props.renderIndex > 0 && <button>New Block!!</button>}
    </div>
   )
}
export default Child

Upvotes: 1

Related Questions