CODEWITHSUNDEEP
javascriptreactjs
Negant
Negant

Reputation: 119

React map function if else condition

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;

Upvotes: 1

Views: 146

Answers (5)

Ragu Ram
Ragu Ram

Reputation: 69

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>
    ));
  }

Upvotes: 0

Muho
Muho

Reputation: 3536

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>
  );
}

Upvotes: 2

kbo
kbo

Reputation: 452

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';
    }
  });

Upvotes: 0

blueseal
blueseal

Reputation: 2908

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>
    ));}
   </>
  }

Upvotes: 0

Mathieu
Mathieu

Reputation: 759

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

Upvotes: 0

Related Questions