-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathReadme.txt
78 lines (44 loc) · 1.32 KB
/
Readme.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
DESAFÍO - EXPIRA EL MIÉRCOLES 20/01/2021 23:59HS
Desafío: Catálogo con MAPS y Promises
Tarea5
En directorio componentes:
1) Se carga data.json en ItemListContainer.js se usa promise con demora de 2 segundos y hook.
2) Posteriormente se pasa json a ItemList.js
<ItemList items={item}/>
3) Desde ItemList.js se usa map y el array de json para llamar Item.js que muestra cada item en json en pantalla.
Contenido de Itemlist
const ItemList = ({items}) =>{
console.log(items);
return (
<>
{ items.map(item=>
<Item key={item.id} jsonpack={item} />
)}
</>
)
}
export default ItemList;
4) Contenido de Item.js que muestra cada item
import React from "react";
import {Card,Button} from 'react-bootstrap';
const Item =({jsonpack})=>{
return(
<>
<Card border="light" bg="dark" style={{ width: '10rem' }}
className="mb-2">
<Card.Header>
<Card.Img variant="top" src={jsonpack.pictureurl} />
</Card.Header>
<Card.Body>
<Card.Title>{jsonpack.title}</Card.Title>
<Card.Subtitle className="mb-2 text-muted">Precio:{jsonpack.price}</Card.Subtitle>
<Card.Text>
Descripción<p></p>{jsonpack.description}
</Card.Text>
</Card.Body>
</Card>
</>
);
};
export default Item;
¡Gracias y saludos !