Conditionally render elements in React JS?

Question

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.

Expose a property on the Child component to control the rendering — Leon
– Leon, Commented Jan 30, 2020 at 0:23

GiorgiosJames · Accepted Answer · 2020-01-30 00:29:41Z

1

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

edited Jan 30, 2020 at 0:29

answered Jan 30, 2020 at 0:25

GiorgiosJames

1,04011 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

GiorgiosJames Over a year ago

@Somethingwhatever Sorry! Just tested and you can't use the key prop like this. You need to pass down the index on another prop. I've edited my answer to reflect this.

Somethingwhatever Over a year ago

Awesome!! yeah i have ran into this in the past. it's something to do with the key itself. using the renderIndex worked. Thank you

Collectives™ on Stack Overflow

Conditionally render elements in React JS?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related