map function in javascript not working properly for React components

Question

I am working on a project in ReactJs.I have an array in javascript for which the values will come from the back-end.So, the length of the array will be dynamic.So, I want my UI to change if the array elements contain the string 'No Email Alerts'. So I am writing a map on my array components and trying to render it in the following way:

 {this.state.options.map((email, i) => {
          return (
            <Something />   
                {!(email[i].includes('No Email Alerts')) ? (
                  <Some_Other_UI />
                ) :

                  null}

But, the issue I am facing now is I am not able to exclude the part which contains 'No Email Alerts' and render the different UI. I mean my

{!(email[i].includes('No Email Alerts')) ? (
                      <Some_Other_UI />
                    ) :

                      null}

is not working. What am i doing wrong? Someone please guide me.

what error are you having ?

Ewomazino Ukah
– Ewomazino Ukah

2018-10-08 06:46:33 +00:00
Commented Oct 8, 2018 at 6:46 — Ewomazino Ukah
– Ewomazino Ukah, Commented Oct 8, 2018 at 6:46
Why email[i] ??

sagi
– sagi

2018-10-08 06:46:48 +00:00
Commented Oct 8, 2018 at 6:46 — sagi
– sagi, Commented Oct 8, 2018 at 6:46
You either need this.state.options[i] or just email .

sagi
– sagi

2018-10-08 06:47:39 +00:00
Commented Oct 8, 2018 at 6:47 — sagi
– sagi, Commented Oct 8, 2018 at 6:47
Replace email[i] to email

Kiran Shinde
– Kiran Shinde

2018-10-08 06:48:56 +00:00
Commented Oct 8, 2018 at 6:48 — Kiran Shinde
– Kiran Shinde, Commented Oct 8, 2018 at 6:48
@Rajesh it will have the same mistake as OP code.

sagi
– sagi

2018-10-08 06:52:52 +00:00
Commented Oct 8, 2018 at 6:52 — sagi
– sagi, Commented Oct 8, 2018 at 6:52

Bhojendra Rauniyar · Accepted Answer · 2018-10-08 07:04:36Z

2

The map parameters email and i is used for this.state.options and the i can be used for this.state.options array not just with email (you could use if email has similar indexes though). Also, you'll need to wrap them in an element or you may also use fragment:

{
 this.state.options.map((email, i, arr) => {
   return (
     <div key={email+'-'+i}>{/* provide the key as you wish */}
        <Something />   
        {!(arr[i].includes('No Email Alerts')) ? (
           <Some_Other_UI />
         ) :
        null}
     </div>
   )
}

I would also suggest to use trim and check for lower case in includes like this:

!(arr[i].trim().toLowerCase().includes('no email alerts'))

edited Oct 8, 2018 at 7:04

answered Oct 8, 2018 at 6:58

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

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

2 Comments

pranami Over a year ago

Just one doubt, so what is the email parameter mainly used for? I mean what I was thinking is email loops over the whole array and maps for each element?

Bhojendra Rauniyar Over a year ago

Read this: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Collectives™ on Stack Overflow

map function in javascript not working properly for React components

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related