React map function if else condition

Question

I'm trying to use the map function to add a condition to display the email link.

If item contains email, display it.

However, it still does not work as it should showing "no link", console logs showing correct. I will be grateful for any help.

import React, { Component } from 'react';

import listIcon from '../img/list-icon.svg';

class FaqList extends Component {
  state = {
    items: [
      { id: 1, name: "Lorem.", answer: "Lorem ipsum dolor sit amet, consectetur adipisicing elit.", email: "[email protected]", expanded: false },
      { id: 2, name: "Lorem.", answer: "Lorem ipsum dolor sit amet, consectetur adipisicing elit.", expanded: false }
    ]
  };

  render() {
    let link;

    const isEmail = this.state.items.map(item => {
      if (item.email) {
        console.log(item.email); // showing email
        link = 'show link';
      } else {
        link = 'no link';
      }
    });

    return this.state.items.map(el => (
      <div
        key={el.id}
        onClick={() => this.handleToggle(el.id)}
        className={el.expanded ? "faq__columns--item--active faq__columns--item" : "faq__columns--item"}
      >

        <div className="faq__content">
          <p className="mb-0">{el.answer}</p>

          {link} // Template here

        </div>
      </div>
    ));
  }

}

export default FaqList;

If your last item is false, all will return no link, if your last item is true, all items will return show link.. Not sure that's what your after. — Keith
– Keith, Commented Oct 23, 2019 at 10:36
Replace {link} // Template here with {el.email ? <div>el.email</div> : null}. — Ranjan
– Ranjan, Commented Oct 23, 2019 at 10:36
const isEmail = that's also going to not be very useful, it's just going to be an array of undefined. — Keith
– Keith, Commented Oct 23, 2019 at 10:40
@Ranjan Your way is much cleaner and works perfectly. There is also no need to create a new function. Perfect, thank you very much. — Negant
– Negant, Commented Oct 23, 2019 at 10:44

Muho · Accepted Answer · 2019-10-23 10:46:11Z

2

no need for isEmail, using jsx power you can control the email link visibility inside the map function in render like that:

render() {
  return (
    <div>
      {this.state.items.map(el => (
        <div
          key={el.id}
          onClick={() => this.handleToggle(el.id)}
          className={
            el.expanded
              ? 'faq__columns--item--active faq__columns--item'
              : 'faq__columns--item'
          }
        >
          <div className="faq__content">
            <p className="mb-0">{el.answer}</p>
            {el.email && <div>email: {el.email}</div>}
          </div>
        </div>
      ))}
    </div>
  );
}

edited Oct 23, 2019 at 10:46

answered Oct 23, 2019 at 10:41

Muho

3,5762 gold badges26 silver badges36 bronze badges

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

2 Comments

Ranjan Over a year ago

Prefer using a ternary operator instead of &&, wasn't working for me in a react-native project.

Muho Over a year ago

i use it like that in react native too, maybe you have to update your react-native version!

Mathieu · Accepted Answer · 2019-10-23 10:40:34Z

0

You are already mapping over items in your render method. You don't need to map over items again to render some UI based on the presence or absence of the email key, it can happen in your main map, like so (line 38) : https://codesandbox.io/s/great-tree-c12ks

answered Oct 23, 2019 at 10:40

Mathieu

7597 silver badges21 bronze badges

Comments

blueseal · Accepted Answer · 2019-10-23 10:41:13Z

0

try something like this

 render() {
  return <>
   {this.state.items.map(el => (
      <div
        key={el.id}
        onClick={() => this.handleToggle(el.id)}
        className={el.expanded ? "faq__columns--item--active faq__columns--item" : "faq__columns--item"}
      >
        <div className="faq__content">
          <p className="mb-0">{el.answer}</p>
          {el.email ? <div>show link</div> : <div>no link</div>}
        </div>
      </div>
    ));}
   </>
  }

answered Oct 23, 2019 at 10:41

blueseal

2,9287 gold badges29 silver badges46 bronze badges

Comments

kbo · Accepted Answer · 2019-10-23 10:44:31Z

0

Looks like your link variable needs to be an object i.e.:

{  
  1, 'show link',
  2, 'no link'},
  ...
}

... where 1, 2, 3... (the keys) are the id's of your items, so you could then add links in render like this: {link[id]} // Template here In that case here's a quick fix:

  const link = {};

  const isEmail = this.state.items.map(item => {
    if (item.email) {
      console.log(item.email); // showing email
      link[id] = 'show link';
    } else {
      link[id] = 'no link';
    }
  });

answered Oct 23, 2019 at 10:44

kbo

4526 silver badges21 bronze badges

Comments

Ragu Ram · Accepted Answer · 2019-10-23 11:11:50Z

0

is this what you are looking for ?

_render_email(obj){
obj.email && console.log(obj.email);
return (obj.email)? <div>obj.email</div> : null;
}

 render() {
    return this.state.items.map(el => (
      <div
        key={el.id}
        onClick={() => this.handleToggle(el.id)}
        className={el.expanded ? "faq__columns--item--active faq__columns--item" : "faq__columns--item"}
      >

        <div className="faq__content">
          <p className="mb-0">{el.answer}</p>

          {
               this._render_email(el)                   
          } // -> modified 

        </div>
      </div>
    ));
  }

edited Oct 23, 2019 at 11:11

answered Oct 23, 2019 at 10:52

Ragu Ram

792 silver badges8 bronze badges

Collectives™ on Stack Overflow

React map function if else condition

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related