Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Part of my HTML elements are not being displayed, if I access the webapp from iPhone

I am a beginner and I am writing a webapp with React JS. For a certain part of my app, I need to dynamically create divs and I came up with this snippet:

<div className="flex flex-col items-center gap-4 w-full px-4">
  {descriptions.map((description, index) => (
     <div className="flex flex-col justify-center w-full" key={index} >
        <p className="text-[#3E4D5B] text-xs md:text-sm leading-normal">{description}</p>
    </div>
  ))}
</div>

For some reason, the HTML elements are being displayed from Web Chrome/Safari, but I see blank space if I access the app from my iPhone. I guess, the .map is not working for IOS version, but I can find no explanations.

Help me, please !!!!

Tried removing the descriptions.map and it works if I leave one .

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Issue resolved! Was not anyhow connected to this chunk of code, there was an issue with backend.


  2. 0

    Unique identifier from the description object itself as the key.if each description object has an id property,you can use that as the key :

    <div className="flex flex-col items-center gap-4 w-full px-4">
  {descriptions.map((description) => (
    <div className="flex flex-col justify-center w-full" key={description.id} >
      <p className="text-[#3E4D5B] text-xs md:text-sm leading-normal">{description.text}</p>
    </div>
  ))}
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search