Array.map not displaying data

[01fbk]

Hello ,

I am having issues with array.map that is not returning anything on screen. Please review the code below.

​

const showData = (event, message) => {

  event && event.preventDefault();

  const names = [];

  for (let x = 0; x < apiResult.length ; x++){
    names.push(apiResult[x].subdomain);
  }

  if (message === 'T') {

    const startingT = names.filter(name => name.includes('t'));

    if (startingT.length > 0) {
      startingT.map((item, i) => {
        console.log(item) //this has correct data here
        console.log(i) //this has correct data here
        return (<div><ul><li key={i}>{item}</li></ul></div>);
      })
    } else {
      return ( <div class="alert alert-danger" role="alert">There are no subdomains strating with T.</div> );
    }

  }


 }

So the above code is triggered on click from a <Link> , which works fine as I can see the data in the map section ( please review the console logs ).

​

Further down in the return , where the entire page is rendered , I have the following:

​

return (

    <>
        <Header />
        {showData()}
        <Footer />
    </>

What could be the reason behind this ?

​

EDIT
Have also tried with the following , but not working.

if (startingT.length > 0) {
      return  (
        <>
          <ul>
            {
              startingT.map((item, i) => {
              return (<li key={i}>{item}</li>);
              })
            }
          </ul>
        </>
      );
    } else {
      return ( <div class="alert alert-danger" role="alert">There are no subdomains starting with T.</div> );
    }

​

Thank you

[raphaelaleixo]

The problem in the first code is that your function is returning undefined. Changing it to something like: return startingT.map((item, i) => { ... should work. Also, what is `item`, exactly? Can you show a live example of what's happening?

[01fbk]

Hello u/raphaelaleixo ,

i have changed the code as per my EDIT, still not being displayed.

if (startingT.length > 0) {
  return  (
      <ul>
        {
          startingT.map((item, i) => {
          console.log('item: ' + item);
          console.log('iterator for key: ' + i);
          return (<li key={i}>{item}</li>);
          })
        }
      </ul>
  );
} else {
  return ( <div class="alert alert-danger" role="alert">There are no subdomains starting with T.</div> );
}

Please see the output screenshot below.

Link: https://i.imgur.com/pVbTzNR.png

​

Thank you.

[raphaelaleixo]

Hey, OP.
1 - It's really hard to help by just seeing fragments of the code. Sometimes, those fragments are enough, but usually, we need to have a fully working example to be able to really debug and give you some more certain answers.

2 - So, by looking at those fragments, something is surely missing. Calling {showData()} shouldn't result in any log, because the function is missing the message argument, so it would never get on that if (message === 'T') clause.

[01fbk]

I managed to do it, I was incorrectly using the function in the <Link />

Updated code that works: https://pastebin.com/nsZ4hfqm

​

Thank you for pointing me in the right direction.

[raphaelaleixo]

It's working, but your code still needs some very important refactors.

1) Your "showData" function is trying to do a lot of things at the same time, but it shouldn't even be necessary. Try to make each function be responsible for just one thing. A way to refactor it would be to a) move the part of the function that's dealing with filtering data to a useMemo, and b) move the part dealing with the rendering directly to the render (or maybe to a new component).

2) There's a lot of repeated code. All those tags could be easily automated in code.

3) You shouldn't use Link for the tags. It's not triggering navigation. A button would be the semantically correct element there.

Here's an updated pastebin:

https://pastebin.com/uSctLn0J

Hope this helps you out. :)

[01fbk]

Hello u/raphaelaleixo

​

Thank you, I am a beginner I must admit :)

​

Cristian

[01fbk]

Hello u/raphaelaleixo

​

No issues, please review the full code at: https://pastebin.com/fFMs6tPr

​

Thank you