React.js/React-Native how to skip Map() iteration if condition is falsy?

Question

I have this simple component in React-Native, My goal is to skip the iteration if the given argument gradeIsMandatory is false, it should only iterate over warranty and price, How can I achieve this result without affecting performance? I will take any advice thanks

import React, { useCallback } from 'react';
import { View, Text, SafeAreaView, SectionList, StyleSheet, Image, TouchableOpacity, Alert} from 'react-native';





export const ModalHeader: React.FC<{}> = () => {
    const gradeIsMandatory = false
    
    //code I tried to use
    useEffect(()=>{
        if(!gradeIsMandatory){
            let appendGrade =  { key: 'grade', title: 'Grade' }
            modalTabs.push(appendGrade)
        }
    },[])
    return (
        <View>
            <View>
                <View>
                    {modalTabs.map((tab, i) => (
                        <TouchableOpacity>
                          <Text>{tab.title}</Text>
                        </TouchableOpacity>
                    ))}
                </View>
            </View>
        </View>
    );
}

const modalTabs = [
    { key: 'warranty', title: 'Your Waranty' },
    { key: 'price', title: 'Your price' }
]

If you need to skip, you're looking for filter, not map. — Brian Thompson
– Brian Thompson, Commented Feb 8, 2022 at 17:47
They're also useful in conjunction - items.filter(shouldIKeep).map(renderJSX). — Brian Thompson
– Brian Thompson, Commented Feb 8, 2022 at 17:49

windowsill · Accepted Answer · 2022-02-08 17:58:55Z

2

Try a conditional append.

const extendedTabs = [...modalTabs, ...(gradeIsMandatory ? [{ key: 'grade', title: 'Grade' }] : [] )];

answered Feb 8, 2022 at 17:58

windowsill

3,6491 gold badge11 silver badges15 bronze badges

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

Comments

shlomieb · Accepted Answer · 2022-02-08 18:29:44Z

0

I would delete the useEffect and render this:

return (
    <View>
        <View>
            <View>
                {modalTabs.map((tab, i) => (
                    <TouchableOpacity>
                      <Text>{tab.title}</Text>
                    </TouchableOpacity>
                ))}
                {
                  gradeIsMandatory && <TouchableOpacity><Text>Grade</Text></TouchableOpacity>
                }
            </View>
        </View>
    </View>
);

answered Feb 8, 2022 at 18:29

shlomieb

464 bronze badges

Comments

chromaloop · Accepted Answer · 2022-02-08 19:15:18Z

0

You cannot skip a map iteration. You can however just return <Fragment /> if your map condition isn't met.

answered Feb 8, 2022 at 19:15

chromaloop

2225 silver badges11 bronze badges

Comments

farhad · Accepted Answer · 2022-02-08 20:52:52Z

0

this useEffect will run once just after the first render of the component, manipulating modalTabs there will do nothing becuase modalTabs is not a State of this component. the correct way is:

import { useState, useEffect } from "react";

const modalTabsInitialValue = [
  { key: "warranty", title: "Your Waranty" },
  { key: "price", title: "Your price" }
];

export default (props) => {
  const [modalTabs, setModalTabs] = useState(modalTabsInitialValue);

  useEffect(() => {
    if (props.gradeIsMandatory) {
      setModalTabs((prevModalTabs) => {
        const appendGrade = { key: "grade", title: "Grade" };
        return [...prevModalTabs, appendGrade];
      });
    }
  }, [props.gradeIsMandatory, setModalTabs]);

  return {
    ...
  }
};

send the gradeIsMandatory as a property to this component
define modalTabs as state
use a useEffect hook with props.gradeIsMandatory as a dependency
inside the useEffect based on the value of gradeIsMandatory create a new array and change the modalTabs state forcing the component to reRender

Update: this is not the best solution for this problem, the correct answer as windowsill said is a simple const: answer

edited Feb 8, 2022 at 20:52

answered Feb 8, 2022 at 18:24

farhad

2263 silver badges8 bronze badges

2 Comments

windowsill Over a year ago

This definitely works, but it's the derived state anti-pattern. Because the wanted output is deterministic, ie the result is always the same based on given inputs, a simple const statement is all you need. reactjs.org/blog/2018/06/07/…

farhad Over a year ago

I agree with you, in this case which the result is deterministic using a simple const at the top of the functional component is absolutely correct, my answer causes an extra render, thank you

Collectives™ on Stack Overflow

React.js/React-Native how to skip Map() iteration if condition is falsy?

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related