Rendering from loop react native

Question

I want to iterate over nested object and rendering out for each item an text element in react native.

const translationToWeekDays = {
fr_FR: {
  Monday: lundi,
  Tuesday: mardi,
  Wednesday: mercredi,
  Thursday: jeudi,
  Friday: vendredi,
},
};

This is the object, and this is my current code

          <>
            {Object.values(translationToWeekDays).forEach((week) => {
              Object.values(week).forEach((day) => (
                <Row>
                  <Text>
                    {day}
                  </Text>
                </Row>
              ));
            })}
          </>

any directions as to where i am going wrong? :(

Candace Ahrends · Accepted Answer · 2020-11-16 19:17:27Z

1

Try something like this?

{Object.values(translationToWeekDays).map((week) =><> { Object.values(week).map((day) =>

{day}

)}</>)}

answered Nov 16, 2020 at 19:17

Candace Ahrends

861 silver badge3 bronze badges

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

1 Comment

davidmyersdev Over a year ago

To clarify, .forEach does not have a return value, so that is why .map works instead.

infecting · Accepted Answer · 2020-11-16 18:25:58Z

0

Cant make a comment but make sure to use map as it can return jsx...

const translationToWeekDays = [
[
  lundi,
  mardi,
  mercredi,
  jeudi,
  vendredi
],
];

<>
            {translationToWeekDays.map((week) => {
              Object.values(week).map((day) => (
                <Row>
                  <Text>
                    {day}
                  </Text>
                </Row>
              ));
            })}
          </>

edited Nov 16, 2020 at 18:25

answered Nov 16, 2020 at 18:15

infecting

7737 silver badges11 bronze badges

5 Comments

nonameguy Over a year ago

Still not rendering out :(

infecting Over a year ago

Oh I misread your post.... you should be using an array not a nested object.. will update code

infecting Over a year ago

what you can do instead if you would like to use the map function is change this to an array and verify the dates by index

nonameguy Over a year ago

Can't i make it work without chaning the object? I would like to keep the object, there must be a way to render out in a loop with iterating over the nested object

infecting Over a year ago

are there other languages in the parent objcet?

user14361391 · Accepted Answer · 2020-11-16 18:51:04Z

To solve your problem, you can try this, can be a possible without changing the original object.

const translationToWeekDays = {
  fr_FR: {
    Monday: "lundi",
    Tuesday: "mardi",
    Wednesday: "mercredi",
    Thursday: "jeudi",
    Friday: "vendredi"
  }
};

export default function App() 
{

  let daysTranslation = []

  for (let day in translationToWeekDays.fr_FR) 
  {
    daysTranslation.push({
      id: day,
      value: translationToWeekDays.fr_FR[day]
    })
  }


  const daysTranslated = daysTranslation.map(item =>
    {
      return <Text>{item.value}</Text>
    })



  return (
    <Row>
      {daysTranslated}
    </Row>
  );
}

However, using Flatlist better than mapping. But this should work for a small list. To loop over content, transforming object into map is the best idea

Collectives™ on Stack Overflow

Rendering from loop react native

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related