Adding Custom components with a loop in React-CodePudding

I've been learning React and practicing with some basic stuff, and this is probably a very simple problem with an even simpler solution, but for the life of me I can't find what i need on google.

Basically i have this piece of code:

export default function BigContainer({ rain, icon, temperature, date }) {
  return (
    <div className='bigContainer'>
      <Container rain={rain[0]} icon={icon[0]} temperature={temperature[0]} date={date[0]} />
      <Container rain={rain[1]} icon={icon[1]} temperature={temperature[1]} date={date[1]} />
      <Container rain={rain[2]} icon={icon[2]} temperature={temperature[2]} date={date[2]} />
    </div>
  )
}

The variables in question are simple arrays with either numbers or strings in them, nothing really important.

And I've been looking around for a way to not have to hardcode in the indexation of each property, since hardcoding this stuff isnt ideal.

I've tried mapping one of the arrays but i got kinda confused on how to implement the other properties with relation to the one array i was mapping, so I couldn't get that to work.

So yeah, if theres a way to do like

    Loop the stuff here{
      <Container rain={rain[i]} icon={icon[i]} temperature={temperature[i]} date={date[i]} />
    }

Or something similar, its basically what im looking for. Thank you in advance.

CodePudding user response：

try this you can replace [1,2] with your array you wish to map

[1,2].map((item,index)=>

  <Container rain={rain[index]}
             icon={icon[index]} 
             temperature={temperature[index]}
              date={date[index]} />
  )

CodePudding user response：

This is not the best way to render dynamic values in react. First you need to put the values in an object.

//For example put them in an array called weather and put the values 
  inside with key-value pairs. Then you can easily loop the values.



export default function App() {
    return (
        <div className="bigContainer">
            {weather.map((value) => (
                <table>
                    <tr>
                     <th>rain</th>
                     <th>temperature</th>
                     <th>date</th>
                   </tr>
                   <tr>
                    <td>{value.rain}</td>
                     <td>{value.temperature}</td>
                     <td>{value.date}</td>
                   </tr>
               </table>
           ))}
       </div>
     );
    }

CodePudding user response：

you can also just pass an array of object instead of passing the array individually since they are related to each other

 const weather = [
    {
      rain: 'rain1',
      icon: 'icon1',
      temperature: 'temp1',
      date: 'date1',
    },
    {
      rain: 'rain2',
      icon: 'icon2',
      temperature: 'temp2',
      date: 'date2',
    },
    {
      rain: 'rain3',
      icon: 'icon3',
      temperature: 'temp3',
      date: 'date3',
    },
  ]

{weather.map((item, key) => (
    <div key={key} className='bigContainer'>
       <Container rain={item.rain} icon={item.icon} temperature={item.temperature} date={item.date} />
    
     </div>
))}

and map them like this

CodePudding user response：

Assuming that your Array object like this;

const rain=[1, 2, 3, 4, 5]
const icon=['icon1', 'icon2', 'icon3', 'icon4', 'icon5']
const temperature = [13, 15, 17, 14, 12]

You can use Array.map function like this;

[...Array(5)].map((item, idx)=>
    <Container
     rain={rain[idx]}
    icon={icon[idx]}
    temperature={temperature[idx]}
    key={idx}
    />
    )

Or when your data object array is ready, you can use Array.map like this.

const weathers=[
{rain:'rainy', temperature:11, date:'2020-04-01'},
{rain:'no rain', temperature:16, date:'2020-04-02'},
{rain:'drizzle', temperature:13, date:'2020-04-03'},
]

return (
    <>
         {
            weathers.map((value, idx) => (
                <table key={idx}>
                    <tr>
                     <th>rain</th>
                     <th>temperature</th>
                     <th>date</th>
                   </tr>
                   <tr>
                    <td>{value.rain}</td>
                     <td>{value.temperature}</td>
                     <td>{value.date}</td>
                   </tr>
               </table>
           ))}
    </>
    );