Adding an if condition inside the map function in react

Question

How can I add an if else condition inside tags.map ternary operator to check below condition ? Do I need change the existing ternary operator to achieve this ? Could someone please help ?

Demo link: https://codesandbox.io/s/prod-glade-lsf46?file=/src/App.js

if(findTag == tag) {
<a onClick={getFilterTags} className="grouptechtags" style={{backgroundColor: `${showColor}`},{ marginRight: "10px" }} key={tag}>{tag}</a>
} else {
}

// Following is the code

const [posts, isLoading] = usePosts();
const [searchResults, setSearchResults] = useState([]);
const [showColor, setShowColor] = useState("");
const [findTag, setFindTag] = useState("");

  const randomizedHex = (tags) => {
    setFindTag(tags);
    console.log("Print tag of a:"+tags);
    const randomColor = "#"+ Math.floor(Math.random()*16777215).toString(16);
    setShowColor(randomColor);
}

<label>
 {
  searchResults.map(({ fields: { id, tags } }) => (
      <div key={id} className="techtags">
        {
            Array.isArray(tags) ? (
                tags.map((tag) => (
                  <a onClick={getFilterTags} className="grouptechtags" style={{backgroundColor: `${showColor}`},{ marginRight: "10px" }} key={tag}>{tag}</a>
                      ))
                       ) : (
                 <a onClick={getFilterTags} style={{backgroundColor: `${showColor}`}} className="grouptechtags">{tags}</a>
            )
        }
     </div>
   ))
 }
</label>

score 1 · Answer 1 · answered Oct 10 '20 at 02:22

1

You can use a block to give you the ability to use statements in the map function. That way you don't need to use nested ternary operators

tags.map((tag) => {
  if (tag !== findTag) {
    return null;
  }
  return (
    <a
      href="/some"
      onClick={getFilterTags}
      className="grouptechtags"
      style={({ backgroundColor: `${showColor}` }, { marginRight: '10px' })}
      key={tag}
    >
      {tag}
    </a>
  );
});

answered Oct 10 '20 at 02:22

Zachary Haber

10,376
1
17
31

Thank you, I have added as you suggested. But in my case it is always going to ternary else condition line ``189`` in the demo link added. I am handling two cases if there are multiple tags it will execute ``if`` for a blog with single tag it will go in else condition. – soccerway Oct 10 '20 at 05:20

score 1 · Answer 2 · answered Oct 10 '20 at 02:29

1

I think it will help you

tags.map((tag) => {
  if (findTag === tag) {
    return (
      <a onClick={getFilterTags} className="grouptechtags" 
      style={
          ({ backgroundColor: `${showColor}` }, { marginRight: "10px" })
        }
      key={tag}
      >
        {tag}
      </a>
    );
  } else {
    return // any jsx 
  }
})

answered Oct 10 '20 at 02:29

linthertoss

166
6

Sorry this is not working, on click it is displaying color for all the tags . When I set a break point it is not going inside – soccerway Oct 10 '20 at 02:35
Ohhh, You ask How can I add an if-else condition inside tags.map :D – linthertoss Oct 10 '20 at 02:44

ZORGATI Achraf · Answer 3 · 2020-10-10T02:23:27.430

0

Try this code below:

     tags.map((tag) =>
                    findTag === tag ? (
                        <a onClick={getFilterTags} className="grouptechtags" style={({ backgroundColor: `${showColor}` },{ marginRight: "10px" })} key={tag} >{tag}</a>) 
                    : ( <div>else come here </div>))

edited Oct 10 '20 at 02:23

answered Oct 10 '20 at 02:18

ZORGATI Achraf

34
5

score 0 · Answer 4 · answered Oct 10 '20 at 02:24

0

if-else do not work inside JSX. You will have to use the ternary operator to apply condition.

DOC

You can also check this

answered Oct 10 '20 at 02:24

Ejaz

1,504
3
25
51

Adding an if condition inside the map function in react

4 Answers4