He estado aprendiendo React y practicando con algunas cosas básicas, y este es probablemente un problema muy simple con una solución aún más simple, pero por mi vida no puedo encontrar lo que necesito en Google.
Básicamente tengo este fragmento de código:
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> ) }Las variables en cuestión son arreglos simples con números o cadenas en ellos, nada realmente importante.
Y he estado buscando una manera de no tener que codificar en la indexación de cada propiedad, ya que codificar estas cosas no es lo ideal.
Intenté mapear una de las matrices, pero me confundí un poco sobre cómo implementar las otras propiedades en relación con la matriz que estaba mapeando, por lo que no pude hacer que funcionara.
Así que sí, si hay una manera de hacer como
Loop the stuff here{ <Container rain={rain[i]} icon={icon[i]} temperature={temperature[i]} date={date[i]} /> }O algo similar, es básicamente lo que estoy buscando. Gracias de antemano.
intente esto, puede reemplazar [1,2] con su matriz que desea mapear
[1,2].map((item,index)=> <Container rain={rain[index]} icon={icon[index]} temperature={temperature[index]} date={date[index]} /> )Esta no es la mejor manera de representar valores dinámicos en reaccionar. Primero necesitas poner los valores en un objeto.
//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> ); }también puede simplemente pasar una matriz de objetos en lugar de pasar la matriz individualmente, ya que están relacionados entre sí
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> ))}y mapearlos así