I'm trying to efficiently make a key-value tour in an array in reactjs.
However, I do not know how to display the "key" array without creating another map function.
const equipos = [
{
key: [
'Real Madrid',
'Manchester United',
'Champions League',
'English Premier League',
'Bayern Munchen',
'Juventus',
'Arsenal',
],
images: [
'http://as00.epimg.net/img/comunes/fotos/fichas/equipos/large/1.png',
'https://4.bp.blogspot.com/_Z_YWTFNHUvw/TQDBKNXdwcI/AAAAAAAACI0/COhwIG2PkFA/s320/Manchester-United%255B1%255D.png',
'http://www.stickpng.com/assets/images/5842fe06a6515b1e0ad75b3b.png',
'https://i.pinimg.com/originals/f1/44/fc/f144fc61d0b0ed7716d740aa9deefb07.png',
'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/FC_Bayern_M%C3%BCnchen_logo_%282017%29.svg/1200px-FC_Bayern_M%C3%BCnchen_logo_%282017%29.svg.png',
'http://as00.epimg.net/img/comunes/fotos/fichas/equipos/large/29.png',
'https://i.pinimg.com/originals/98/32/8b/98328b1d64c5f93ef5eceea7586430d1.png',
],
},
];
console.log(equipos.images)
const IconosSeccion = () => (
<div className="containerIconosSeccion">
<div className="parentIconos" />
{equipos.map(equipo => (
<div>
{equipo.images.map(image => (
<div className="backgroundIconoIndependiente">
<img alt="#" className="iconoIndependiente" src={image} />
<span className="textoIconoIndependiente">Real madrid</span>
</div>
))}
</div>
))}
</div>
);
I want to show it in the span of the classname textIconoIndependiente.
Thank you!
The second argument passed to the map
function is the index, which you could use to read the correct key
.
const IconosSeccion = () => (
<div className="containerIconosSeccion">
<div className="parentIconos" />
{equipos.map(equipo => (
<div>
{equipo.images.map((image, index) => (
<div className="backgroundIconoIndependiente">
<img alt="#" className="iconoIndependiente" src={image} />
<span className="textoIconoIndependiente">{equipo.key[index]}</span>
</div>
))}
</div>
))}
</div>
);
I'm not sure your data is well formatted.
I suggest you another format. In that way, It's possible to render your image and the name of the club with only one map.
const equipos = [
{name:'Real Madrid',image:'http://as00.epimg.net/img/comunes/fotos/fichas/equipos/large/1.png',},
{name:'Manchester United',image:'https://4.bp.blogspot.com/_Z_YWTFNHUvw/TQDBKNXdwcI/AAAAAAAACI0/COhwIG2PkFA/s320/Manchester-United%255B1%255D.png',},
{name:'Champions League',image:'http://www.stickpng.com/assets/images/5842fe06a6515b1e0ad75b3b.png',},
{name:'English Premier League',image:'https://i.pinimg.com/originals/f1/44/fc/f144fc61d0b0ed7716d740aa9deefb07.png',},
{name:'Bayern Munchen',image:'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/FC_Bayern_M%C3%BCnchen_logo_%282017%29.svg/1200px-FC_Bayern_M%C3%BCnchen_logo_%282017%29.svg.png',},
{name:'Juventus',image:'http://as00.epimg.net/img/comunes/fotos/fichas/equipos/large/29.png',},
{name:'Arsenal',image:'https://i.pinimg.com/originals/98/32/8b/98328b1d64c5f93ef5eceea7586430d1.png'}
];
const IconosSeccion = () => (
<div className="containerIconosSeccion">
<div className="parentIconos" />
{equipos.map(equipo => (
<div>
<div className="backgroundIconoIndependiente">
<img alt="#" className="iconoIndependiente" src={equipo.image} />
<span className="textoIconoIndependiente">{equipo.name}</span>
</div>
</div>
))}
</div>
);
Here is the code: function fil(val) { console.log('fil'); // never written to console when run in greasemonkey return true; } var temp = unsafeWindow.someobject; console.log(temp); // looks fine ...
Here is the code: function fil(val) { console.log('fil'); // never written to console when run in greasemonkey return true; } var temp = unsafeWindow.someobject; console.log(temp); // looks fine ...
Is that me doing something wrong or some known bug of using scope operator ([...arr]) with Date()/Date.UTC() constructor? What confuses me: x = [2015,5,1]; //(3) [2015, 5, 1] new Date(2015, 5, 1); //...
Is that me doing something wrong or some known bug of using scope operator ([...arr]) with Date()/Date.UTC() constructor? What confuses me: x = [2015,5,1]; //(3) [2015, 5, 1] new Date(2015, 5, 1); //...
I can't seem to pass Vue data into Vue component from an inline template. I'm getting this error instead: vue.min.js: Uncaught TypeError: Cannot read property 'type' of undefined Below is my ...
I can't seem to pass Vue data into Vue component from an inline template. I'm getting this error instead: vue.min.js: Uncaught TypeError: Cannot read property 'type' of undefined Below is my ...
I have a list of objects with a property called created: let objs = [ { id: "1", created: "2019-02-12 00:00:00" }, { id: "2", created: "2018-02-12 00:00:00" }, { id: "3", created: "2017-02-...
I have a list of objects with a property called created: let objs = [ { id: "1", created: "2019-02-12 00:00:00" }, { id: "2", created: "2018-02-12 00:00:00" }, { id: "3", created: "2017-02-...