CODEWITHSUNDEEP
reactjs
web-dev-nerd199
web-dev-nerd199

Reputation: 33

How to use the map function with conditional logic

In the following code, components is an array of objects containing these values: {name: '', url: '', type: '', show: 1}

1 render() {
2   return (
3                   ...
4                   {this.state.editableRowData.components.map((c, i) => (
5                       <>
6                   ...
7   );
8 }

How do I conditionally map components to UI inside of the map function based on if the show value is 1?

Upvotes: 0

Views: 93

Answers (2)

Prince Hernandez
Prince Hernandez

Reputation: 3721

basically you do not need map, because map creates an array of exact same size of the original array, what you need is filter, which behaves almost the same as map but it filters what you do not want to be on the array, therefore you could have something like:

this.state.editableRowData.components.filter((c, i) => (c.show === 1));

working code with difference between map and filter

const array = [{
    "name": 0,
    "url": 0,
    "type": 0,
    "show": 1
  },
  {
    "name": 1,
    "url": 1,
    "type": 1,
    "show": 0
  },
  {
    "name": 2,
    "url": 2,
    "type": 2,
    "show": 1
  },
  {
    "name": 3,
    "url": 3,
    "type": 3,
    "show": 0
  },
  {
    "name": 4,
    "url": 4,
    "type": 4,
    "show": 1
  }
]


const result = array.filter((item) => item.show === 1);
const resultMap = array.map((item) => (item.show === 1? item: null));

console.log(result)
console.log("------------------")
console.log(resultMap);

Upvotes: 0

Petro Momot
Petro Momot

Reputation: 46

You can filter them before mapping through the list.

this.state.editableRowData.components.filter(item => item.show === 1).map((c, i) => (...rendering logic))

Upvotes: 1

Related Questions