Question 237208 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – I have a list in the constant but when reflecting it in a list it gives me a white screen

I tried to transfer a list but the screen went blank

<ul className='flex flex-col gap-2 font-bodyFont'>
  {
    listItem.map(item => 
      item.listData.map(data => (
        <li>{data}</li>
      ))
    )
  }
</ul>

a way to pass the data cleanly and without the white screen

Tags:

3

Answers


  1. 0

    Have you already tried to add the key prop to your li tags?

    Login or Signup to reply.
  2. 0

    If there is blank screen, then there must be error message showing in the console. Meanwhile you can change this code like this

    <ul className='flex flex-col gap-2 font-bodyFont'>
 {
   listItem?.map(item = >item?.listData?.map((data, index) => (
    <li key={index}>{data}</li>
   )))
 }
</ul>
    Login or Signup to reply.
  3. 0

    Try using optional chaining. This will not through any error if listItem or listData is undefined or null

     <ul className='flex flex-col gap-2 font-bodyFont'>
  {
    listItem?.map(item => 
      item.listData?.map(data => (
        <li>{data}</li>
      ))
    )
  }
</ul>

    You can read more about optional chaining here
    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search