How to display more than one list element with different values from multiple arrays?

[TobiasSteinhagen]

Hi there,

we want to show three list items inside of an unordered list and receive the data out of an array, for each list item.
We receive the data from the API like this (for now, we just tried it with the time and the temperature):

We deconstructed it like that:

const {
    temperature_2m_max: temperatures,
    sunrise: sunrises,
    sunset: sunsets,
    time: dates,
    uv_index_max: uv_index,
  } = data.daily;

In our code, we want to get the dates and the temperatures and we wrote it like that:

return (
    <ul>
      <li>
        {dates[0]} {temperatures[0]}
      </li>
      <li>
        {dates[1]} {temperatures[1]}
      </li>
      <li>
        {dates[2]} {temperatures[2]}
      </li>
    </ul>
  );
}

We tried it with mapping, but we want three list elements and not just one and we don't want to write so many maps.

We are asking ourself if this is the best practice or is there another, more elegant solution?

Here is the PR

Looking forward to your feedback!

Thanks in advance ✌️

[TobiasSteinhagen]

Hello there,

we found a solution like this, we would be glad if you could give us some feedback for that one:

  const numberOfForecasts = dates.length;

  function createArrayWithLength(length) {
    return Array.from({ length }, (_, index) => index);
  }
  return (
    <ul>
      {createArrayWithLength(numberOfForecasts).map((_, index) => (
        <li key={index}>
          {dates[index]} {temperatures[index]} {sunrises[index]}
          {sunsets[index]} {uv_index[index]}
        </li>
      ))}
    </ul>
  );
}

[JessicaLoers]

Nice Approach ✨

• I'd suggest a minor refinement. Instead of creating a new array just to get the indices, why not map directly over one of the arrays (like dates) since the length of dates, temperatures and uv_index should all be the same. So you don't need the numberOfForecasts variable and the createArrayWithLength function anymore.
• Using indices as keys in React isn't recommended especially when the list can reorder, as it can lead to rendering bugs. A better key would be a unique string that identifies each item. If the date is guaranteed to be unique (e.g., each date is different), you can use it as the key.

// .... 

return (
    <StyledUnorderedList>
      {dates.slice(0, 3).map((date, index) => (
        <StyledListItem key={date}>
          {dates[index]}
          <br /> Temperature: {temperatures[index]}
          {temperature_unit}
          <br /> Ø UV-Index: {uv_index[index]}
          <br />Ø Precipitation probability:
          {precProp[index]}
          {precProbUnit}
        </StyledListItem>
      ))}
    </StyledUnorderedList>
  );

[TobiasSteinhagen]

Hi Jess,

Thank you for your feedback, it helped us and we can delete some code lines which is always nice ✌️
We adjusted your code a little bit, because we don't need the slice, so the code looks like this

  return (
    <StyledUnorderedList>
      {dates.map((date, index) => (
        <StyledListItem key={date}>
          {dates[index]}
          <br /> Temperature: {temperatures[index]}
          {temperature_unit}
          <br /> Ø UV-Index: {uv_index[index]}
          <br />Ø Precipitation probability:
          {precProp[index]}
          {precProbUnit}
        </StyledListItem>
      ))}
    </StyledUnorderedList>
  );

Why don't we need the slice? Because we can adjust the number of forecast directly in the fetch so we will just receive as many forecasts as we want and don't need to slice the array.

https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&hourly=precipitation_probability,uv_index&daily=temperature_2m_max,sunrise,sunset,uv_index_max&timezone=GMT&forecast_days=10 ⬅️