Listas de componentes

Clase 17 de 37 • Curso de React.js 2019

Tonalli López

student•

Aquí esta la "data":

[
  {
    id: "2de30c42-9deb-40fc-a41f-05e62b5939a7",
    irstName: "Freda",
    lastName: "Grady",
    email: "Leann_Berge@gmail.com",
    jobTitle: "Legacy Brand Director",
    twitter: "FredaGrady22221-7573",
    avatarUrl: "https://www.gravatar.com/avatar/f63a9c45aca0e7e7de0782a6b1dff40b?d=identicon"
  },
  {
    id: "d00d3614-101a-44ca-b6c2-0be075aeed3d",
    firstName: "Major",
    lastName: "Rodriguez",
    email: "Ilene66@hotmail.com",
    jobTitle: "Human Research Architect",
    twitter: "ajorRodriguez61545",
    avatarUrl: "https://www.gravatar.com/avatar/d57a8be8cb9219609905da25d5f3e50a?d=identicon"
  },
  {
    id: "63c03386-33a2-4512-9ac1-354ad7bec5e9",
    firstName: "Daphney",
    lastName: "Torphy",
    email: "Ron61@hotmail.com",
    jobTitle: "National Markets Officer",
    twitter: "DaphneyTorphy96105",
    avatarUrl: "https://www.gravatar.com/avatar/e74e87d40e55b9ff9791c78892e55cb7?d=identicon"
  }
]

Alfredo Enrique Rojas

student•

Muchas gracias :)

Daniel Raya Tena

student•

Gracias!

hector vicencio reyes

student•

cuando al fin entiendes el state y puedes pasar a este video

Carlos Ferrer

student•

Jaja cierto, he tenido que repasar a conciencia desde el video de los props hasta el de los states, pero Yujuu ya estamos aquí de nuevo :)

Bernardo Aguayo Ortega

student•

x2 si pasa!

Jeison Sneider Ruiz Zemanate

student•

Badges.css

.Badges__hero {
  width: 100%;
  padding: 2rem 0;
  background: url('../../images/stars.svg'), #1B1B25;
  background-repeat: repeat;
  margin-bottom: 1rem;
}

.Badges__hero>.Badges__container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.Badges__container {
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  padding: 0 1rem;
}

.Badges_conf-logo {
  margin-bottom: 2rem;
}

.Badges__buttons {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

Maria Gabriela Rodriguez

student•

Thanks, i need it

Doroteo Gonzalez

student•

Justo estaba buscando este comentario, Gracias amigo!

Tania Sosa

student•

Decidí hacer un pequeño homenaje a mis ilustradores mexicanos favoritos y los incluí en éste reto :D

Fernanda Vieira Jófili

student•

¡Qué hermoso es tu trabajo! Me encantó, increíble!

Tania Sosa

student•

:3 awww, gracias @fernandajofili <3

Alfredo Luna

student•

No le cambié mucho y quedó muy simple pero aqui está

Igual les dejo el código por si alguien le ayuda: Lista:

import React from 'react'

import './styles/BadgesList.css'
class BadgesList extends React.Component{
   render(){
      return (
         <ul className="list-unstyled BadgesList">
            {this.props.badges.map((badge)=>{
               return(
                  <li key={badge.id} className="BadgesListItem">
                     <img src={badge.avatarUrl} alt="" className="BadgesListItem__avatar"/>
                     <div>
                        <div><strong>{badge.firstName} {badge.lastName}</strong></div>
                        <div className="Twitter__name">
                           <span className="Twitter__logo"></span>@{badge.twitter}
                        </div>
                        <div>{badge.jobTitle}</div>
                     </div>
                  </li>
               )
            })}
         </ul>
      )
   }
}

export default BadgesList

CSS

.BadgesList li {
  margin-bottom: 1rem;
}

.BadgesListItem {
  background: #FFFFFF;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.23);
  border-radius: 5px;
  display: flex;
  padding: 1rem;
}

.BadgesListItem__avatar {
  border-radius: 50%;
  background: #a3a3a3;
  margin-right: 0.5rem;
  width: 80px;
  height: 80px;
}
.Twitter__name {
  color: #1da1f2;
  
}
.Twitter__logo {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background: url('../../images/Twitter_Social_Icon_Circle_Color.svg');
  margin-right: 0.3rem;
  vertical-align: middle;
}

La imagen de twitter la saqué de la página de twitter de brand resources :)

Fabio Sanchez

student•

Gracias me ahorraste bastante trabajo.

Javier Romero

student•

gracias bro por el aporte

Camila Grizio

student•

Comparto la "data" que el profesor trae en un momento

state = {
    data: [
      {
        id: "2de30c42-9deb-40fc-a41f-05e62b5939a7",
        firstName: "Freda",
        lastName: "Grady",
        email: "Leann_Berge@gmail.com",
        jobTitle: "Legacy Brand Director",
        twitter: "FredaGrady22221-7573",
        avatarUrl:
          "https://www.gravatar.com/avatar/f63a9c45aca0e7e7de0782a6b1dff40b?d=identicon"
      },
      {
        id: "d00d3614-101a-44ca-b6c2-0be075aeed3d",
        firstName: "Major",
        lastName: "Rodriguez",
        email: "Ilene66@hotmail.com",
        jobTitle: "Human Research Architect",
        twitter: "MajorRodriguez61545",
        avatarUrl:
          "https://www.gravatar.com/avatar/d57a8be8cb9219609905da25d5f3e50a?d=identicon"
      },
      {
        id: "63c03386-33a2-4512-9ac1-354ad7bec5e9",
        firstName: "Daphney",
        lastName: "Torphy",
        email: "Ron61@hotmail.com",
        jobTitle: "National Markets Officer",
        twitter: "DaphneyTorphy96105",
        avatarUrl:
          "https://www.gravatar.com/avatar/e74e87d40e55b9ff9791c78892e55cb7?d=identicon"
      }
    ]
  };```

Julio Lanzas

student•

grcias

Guadalupe Alavila

student•

gracias

Alexander Armúa Abregu

student•

Por mi parte estoy haciendo un sistema IGUAL, pero con heroes del World of Warcraft, así tengo una excusa para probar crear componentes que cambien de color según facción y de icono según clase.

Julio Mayén Rosil

student•

¿Lo estás haciendo sobre el mismo proyecto o estás haciendo otro paralelamente?

Alexander Armúa Abregu

student•

Disculpa, recién leo el comentario.

Lo hago con el mismo proyecto. A MI PARECER, es mejor no copiar al pie de la letra todo lo que se ve en las clases porque así cuando hay un error te obligas a buscar en cosas con otras variables y algo de código distinto

Wilson Fabian Pérez Sucuzhañay

student•

Lo hice diferente al diseño, debo coger el curso de diseño jaja

cristian brown salinas

student•

tengo error al agregar la imagen, me podrias ayudar... gracias!

Wilson Fabian Pérez Sucuzhañay

student•

Claro dime que error te da? o me dejas tu código para ayudarte encantado, perdón la demora

Manuel Alejandro Aguilar Téllez Girón

student•

Aquí está la data

[
      {
        id: '2de30c42-9deb-40fc-a41f-05e62b5939a7',
        firstName: 'Freda',
        lastName: 'Grady',
        email: 'Leann_Berge@gmail.com',
        jobTitle: 'Legacy Brand Director',
        twitter: 'FredaGrady22221-7573',
        avatarUrl:
          'https://www.gravatar.com/avatar/f63a9c45aca0e7e7de0782a6b1dff40b?d=identicon',
      },
      {
        id: 'd00d3614-101a-44ca-b6c2-0be075aeed3d',
        firstName: 'Major',
        lastName: 'Rodriguez',
        email: 'Ilene66@hotmail.com',
        jobTitle: 'Human Research Architect',
        twitter: 'MajorRodriguez61545',
        avatarUrl:
          'https://www.gravatar.com/avatar/d57a8be8cb9219609905da25d5f3e50a?d=identicon',
      },
      {
        id: '63c03386-33a2-4512-9ac1-354ad7bec5e9',
        firstName: 'Daphney',
        lastName: 'Torphy',
        email: 'Ron61@hotmail.com',
        jobTitle: 'National Markets Officer',
        twitter: 'DaphneyTorphy96105',
        avatarUrl:
          'https://www.gravatar.com/avatar/e74e87d40e55b9ff9791c78892e55cb7?d=identicon',
      },
    ]

David Andres Carrera Pineda

student•

Jimmy Buriticá Londoño

student•

Super

Simón Arenas

student•

state={
        data:[
            {
              id: '2de30c42-9deb-40fc-a41f-05e62b5939a7',
              firstName: 'Freda',
              lastName: 'Grady',
              email: 'Leann_Berge@gmail.com',
              jobTitle: 'Legacy Brand Director',
              twitter: 'FredaGrady22221-7573',
              avatarUrl:
                'https://www.gravatar.com/avatar/f63a9c45aca0e7e7de0782a6b1dff40b?d=identicon',
            },
            {
              id: 'd00d3614-101a-44ca-b6c2-0be075aeed3d',
              firstName: 'Major',
              lastName: 'Rodriguez',
              email: 'Ilene66@hotmail.com',
              jobTitle: 'Human Research Architect',
              twitter: 'MajorRodriguez61545',
              avatarUrl:
                'https://www.gravatar.com/avatar/d57a8be8cb9219609905da25d5f3e50a?d=identicon',
            },
            {
              id: '63c03386-33a2-4512-9ac1-354ad7bec5e9',
              firstName: 'Daphney',
              lastName: 'Torphy',
              email: 'Ron61@hotmail.com',
              jobTitle: 'National Markets Officer',
              twitter: 'DaphneyTorphy96105',
              avatarUrl:
                'https://www.gravatar.com/avatar/e74e87d40e55b9ff9791c78892e55cb7?d=identicon',
            },
          ],
    }```

Ramiro Elías Guzmán Cabrera

student•

Que agradable sujeto

José María Cuevas Ramírez

student•

Justo estaba buscando este comentario. Muchas gracias!

Luis Rodriguez

student•

Aquí mi respuesta al reto:

badgesList.js

import React from "react";
import "../components/styles/badgesList.css";
import tw_logo from "../images/twitter-logo.png";

class BadgesList extends React.Component {
	render() {
		return (
			<ul className='list-unstyled'>
				{this.props.badges.map(badges => {
					return (
						<li key={badges.id} className='Badge__section-name-list'>
							<img src={badges.avatarUrl} className='Badge__avatar-list' />
							<div>
								{badges.firstName} {badges.lastName}
								<br />
								{badges.title}
								<br />
								<img src={tw_logo} className='tw__logo' />
								<span className='twitter__blue_font'>{badges.twitter}</span>
							</div>
						</li>
					);
				})}
			</ul>
		);
	}
}

export default BadgesList;

y cree un BadgesList.css

.Badge__section-name-list {
	background: #ffffff;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
	margin-bottom: 1rem;
	border-radius: 8px 8px 8px 8px;
	display: flex;
	padding: 1rem 0;
	width: 100%;
}

.Badge__avatar-list {
	border-radius: 50%;
	margin-right: 1rem;
	width: 70px;
	height: 70px;
	display: flex;
	margin-left: 1rem;
}
.twitter__blue_font {
	color: #38a1f3;
}
.tw__logo {
	width: 25px;
	height: 25px;
}

Stiven Trujillo

student•

Tienes el icono de Twitter?

Luis Rodriguez

student•

Creo que solo lo encontré en google, Stiven. Y la agregue al proyecto como imagen.

Si te sirve, también está esta librería de muuuuchos íconos que está genial: https://react-icons.github.io/react-icons/

Humberto Arroyo

student•

.Badges__hero {
  width: 100%;
  padding: 2rem 0;
  background: url('../../images/stars.svg'), #1B1B25;
  background-repeat: repeat;
  margin-bottom: 1rem;
}

.Badges__hero>.Badges__container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.Badges__container {
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  padding: 0 1rem;
}

.Badges_conf-logo {
  margin-bottom: 2rem;
}

.Badges__buttons {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

Willy David Da Conceicao Lozada

student•

AQUI EL RETO PERO CON SOMBRAS PARA QUE SE VEA MEJOR ![](

Ezequiel Dominguez

student•

Wow se ve super cool, que propiedades de CSS utlizaste para lograr ese efecto?

Lizeth Victoria

student•

![](

Pau Pregoni Juan

student•

Por ahora va quedando así :p

Emerson Cedeño

student•

excelente aporte este de la librería para el manejo de los íconos!!!

Manuel Rivera

student•

Data [ { id:"2de30c42-9deb-40fc-a41f-05e62b5939a7", irstName:"Freda", lastName:"Grady", email:"Leann_Berge@gmail.com", jobTitle:"Legacy Brand Director", twitter:"FredaGrady22221-7573", avatarUrl:"https://www.gravatar.com/avatar/f63a9c45aca0e7e7de0782a6b1dff40b?d=identicon" }, { id:"d00d3614-101a-44ca-b6c2-0be075aeed3d", firstName:"Major", lastName:"Rodriguez", email:"Ilene66@hotmail.com", jobTitle:"Human Research Architect", twitter:"ajorRodriguez61545", avatarUrl:"https://www.gravatar.com/avatar/d57a8be8cb9219609905da25d5f3e50a?d=identicon" }, { id:"63c03386-33a2-4512-9ac1-354ad7bec5e9", firstName:"Daphney", lastName:"Torphy", email:"Ron61@hotmail.com", jobTitle:"National Markets Officer", twitter:"DaphneyTorphy96105", avatarUrl:"https://www.gravatar.com/avatar/e74e87d40e55b9ff9791c78892e55cb7?d=identicon" } ]

Camila Grizio

student•

Gracias, no lo encontraba en los archivos

Camila Grizio

student•

Uriel Mojica Mejía

student•

Listo Reto Cumplido !!

Willy David Da Conceicao Lozada

student•

Muy bonito de donde sacaste las imgenes las descargaste o usas una url??

Uriel Mojica Mejía

student•

De iconscut

Juan Sebastian Higuita Riascos

student•

Algo que podrian implementar en caso de querer añadir mas Badges es crear un .json que contenga toda la data, y luego hacer el import dentro de Badges

data.json

{
  "data": [
    {
      "id": "2de30c42-9deb-40fc-a41f-05e62b5939a7",
      "firstName": "Freda",
      "lastName": "Grady",
      "email": "Leann_Berge@gmail.com",
      "jobTitle": "Legacy Brand Director",
      "twitter": "FredaGrady22221-7573",
      "avatarUrl": "https://www.gravatar.com/avatar/f63a9c45aca0e7e7de0782a6b1dff40b?d=identicon"
    },
    {
      "id": "d00d3614-101a-44ca-b6c2-0be075aeed3d",
      "firstName": "Major",
      "lastName": "Rodriguez",
      "email": "Ilene66@hotmail.com",
      "jobTitle": "Human Research Architect",
      "twitter": "ajorRodriguez61545",
      "avatarUrl": "https://www.gravatar.com/avatar/d57a8be8cb9219609905da25d5f3e50a?d=identicon"
    },
    {
      "id": "63c03386-33a2-4512-9ac1-354ad7bec5e9",
      "firstName": "Daphney",
      "lastName": "Torphy",
      "email": "Ron61@hotmail.com",
      "jobTitle": "National Markets Officer",
      "twitter": "DaphneyTorphy96105",
      "avatarUrl": "https://www.gravatar.com/avatar/e74e87d40e55b9ff9791c78892e55cb7?d=identicon"
    }
  ]
}

Badges.js

import data from "./data.json";
import "./styles/Badges.css";
import confLogo from "../images/badge-header.svg";

class Badges extends Component {
  state = {
    data: [data.data]
  };

  render() {
    return (
      <div>
        <Navbar />

        <div className="Badges">
          <div className="Badges__hero">
            <div className="Badges__container">
              <img
                className="Badges_conf-logo"
                src={confLogo}
                alt="Conf Logo"
              />
            </div>
          </div>
        </div>

        <div className="Badge__container">
          <div className="Badges__buttons">
            <a href="/badges/new" className="btn btn-primary">
              New Badge
            </a>
          </div>

          <div className="Badges__list">
            <div className="Badges__container">
              <BadgesList badges={this.state.data} />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

BadgesList.js

class BadgesList extends Component {
  render() {
    const dataObj = Object.values(this.props.badges.data)[0];

    return (
      <ul className="list-unstyled">
        {dataObj.map(badge => {
          return (
            <li key={badge.id}>
              <p>
                {badge.firstName}
                {badge.lastName}
              </p>
            </li>
          );
        })}
      </ul>
    );
  }
}

Para poder mapear el .json primero deben de obtener los "values", pueden leer acerca de esto aqui:

David Antonio Garcia Saaib

student•

yo cambié data: [data.data] por ... data y funcionó por lo menos en la primera parte

Jimmy Buriticá Londoño

student•

Muy interesante esta opción.

Alexis Lo

student•

Reto cumplido. ![](

[
  {
    id: "2de30c42-9deb-40fc-a41f-05e62b5939a7",
    irstName: "Freda",
    lastName: "Grady",
    email: "Leann_Berge@gmail.com",
    jobTitle: "Legacy Brand Director",
    twitter: "FredaGrady22221-7573",
    avatarUrl: "https://www.gravatar.com/avatar/f63a9c45aca0e7e7de0782a6b1dff40b?d=identicon"
  },
  {
    id: "d00d3614-101a-44ca-b6c2-0be075aeed3d",
    firstName: "Major",
    lastName: "Rodriguez",
    email: "Ilene66@hotmail.com",
    jobTitle: "Human Research Architect",
    twitter: "ajorRodriguez61545",
    avatarUrl: "https://www.gravatar.com/avatar/d57a8be8cb9219609905da25d5f3e50a?d=identicon"
  },
  {
    id: "63c03386-33a2-4512-9ac1-354ad7bec5e9",
    firstName: "Daphney",
    lastName: "Torphy",
    email: "Ron61@hotmail.com",
    jobTitle: "National Markets Officer",
    twitter: "DaphneyTorphy96105",
    avatarUrl: "https://www.gravatar.com/avatar/e74e87d40e55b9ff9791c78892e55cb7?d=identicon"
  }
]

.Badges__hero {
  width: 100%;
  padding: 2rem 0;
  background: url('../../images/stars.svg'), #1B1B25;
  background-repeat: repeat;
  margin-bottom: 1rem;
}

.Badges__hero>.Badges__container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.Badges__container {
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  padding: 0 1rem;
}

.Badges_conf-logo {
  margin-bottom: 2rem;
}

.Badges__buttons {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

import React from 'react'

import './styles/BadgesList.css'
class BadgesList extends React.Component{
   render(){
      return (
         <ul className="list-unstyled BadgesList">
            {this.props.badges.map((badge)=>{
               return(
                  <li key={badge.id} className="BadgesListItem">
                     <img src={badge.avatarUrl} alt="" className="BadgesListItem__avatar"/>
                     <div>
                        <div><strong>{badge.firstName} {badge.lastName}</strong></div>
                        <div className="Twitter__name">
                           <span className="Twitter__logo"></span>@{badge.twitter}
                        </div>
                        <div>{badge.jobTitle}</div>
                     </div>
                  </li>
               )
            })}
         </ul>
      )
   }
}

export default BadgesList

.BadgesList li {
  margin-bottom: 1rem;
}

.BadgesListItem {
  background: #FFFFFF;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.23);
  border-radius: 5px;
  display: flex;
  padding: 1rem;
}

.BadgesListItem__avatar {
  border-radius: 50%;
  background: #a3a3a3;
  margin-right: 0.5rem;
  width: 80px;
  height: 80px;
}
.Twitter__name {
  color: #1da1f2;
  
}
.Twitter__logo {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background: url('../../images/Twitter_Social_Icon_Circle_Color.svg');
  margin-right: 0.3rem;
  vertical-align: middle;
}

state = {
    data: [
      {
        id: "2de30c42-9deb-40fc-a41f-05e62b5939a7",
        firstName: "Freda",
        lastName: "Grady",
        email: "Leann_Berge@gmail.com",
        jobTitle: "Legacy Brand Director",
        twitter: "FredaGrady22221-7573",
        avatarUrl:
          "https://www.gravatar.com/avatar/f63a9c45aca0e7e7de0782a6b1dff40b?d=identicon"
      },
      {
        id: "d00d3614-101a-44ca-b6c2-0be075aeed3d",
        firstName: "Major",
        lastName: "Rodriguez",
        email: "Ilene66@hotmail.com",
        jobTitle: "Human Research Architect",
        twitter: "MajorRodriguez61545",
        avatarUrl:
          "https://www.gravatar.com/avatar/d57a8be8cb9219609905da25d5f3e50a?d=identicon"
      },
      {
        id: "63c03386-33a2-4512-9ac1-354ad7bec5e9",
        firstName: "Daphney",
        lastName: "Torphy",
        email: "Ron61@hotmail.com",
        jobTitle: "National Markets Officer",
        twitter: "DaphneyTorphy96105",
        avatarUrl:
          "https://www.gravatar.com/avatar/e74e87d40e55b9ff9791c78892e55cb7?d=identicon"
      }
    ]
  };```

[
      {
        id: '2de30c42-9deb-40fc-a41f-05e62b5939a7',
        firstName: 'Freda',
        lastName: 'Grady',
        email: 'Leann_Berge@gmail.com',
        jobTitle: 'Legacy Brand Director',
        twitter: 'FredaGrady22221-7573',
        avatarUrl:
          'https://www.gravatar.com/avatar/f63a9c45aca0e7e7de0782a6b1dff40b?d=identicon',
      },
      {
        id: 'd00d3614-101a-44ca-b6c2-0be075aeed3d',
        firstName: 'Major',
        lastName: 'Rodriguez',
        email: 'Ilene66@hotmail.com',
        jobTitle: 'Human Research Architect',
        twitter: 'MajorRodriguez61545',
        avatarUrl:
          'https://www.gravatar.com/avatar/d57a8be8cb9219609905da25d5f3e50a?d=identicon',
      },
      {
        id: '63c03386-33a2-4512-9ac1-354ad7bec5e9',
        firstName: 'Daphney',
        lastName: 'Torphy',
        email: 'Ron61@hotmail.com',
        jobTitle: 'National Markets Officer',
        twitter: 'DaphneyTorphy96105',
        avatarUrl:
          'https://www.gravatar.com/avatar/e74e87d40e55b9ff9791c78892e55cb7?d=identicon',
      },
    ]

state={
        data:[
            {
              id: '2de30c42-9deb-40fc-a41f-05e62b5939a7',
              firstName: 'Freda',
              lastName: 'Grady',
              email: 'Leann_Berge@gmail.com',
              jobTitle: 'Legacy Brand Director',
              twitter: 'FredaGrady22221-7573',
              avatarUrl:
                'https://www.gravatar.com/avatar/f63a9c45aca0e7e7de0782a6b1dff40b?d=identicon',
            },
            {
              id: 'd00d3614-101a-44ca-b6c2-0be075aeed3d',
              firstName: 'Major',
              lastName: 'Rodriguez',
              email: 'Ilene66@hotmail.com',
              jobTitle: 'Human Research Architect',
              twitter: 'MajorRodriguez61545',
              avatarUrl:
                'https://www.gravatar.com/avatar/d57a8be8cb9219609905da25d5f3e50a?d=identicon',
            },
            {
              id: '63c03386-33a2-4512-9ac1-354ad7bec5e9',
              firstName: 'Daphney',
              lastName: 'Torphy',
              email: 'Ron61@hotmail.com',
              jobTitle: 'National Markets Officer',
              twitter: 'DaphneyTorphy96105',
              avatarUrl:
                'https://www.gravatar.com/avatar/e74e87d40e55b9ff9791c78892e55cb7?d=identicon',
            },
          ],
    }```

import React from "react";
import "../components/styles/badgesList.css";
import tw_logo from "../images/twitter-logo.png";

class BadgesList extends React.Component {
	render() {
		return (
			<ul className='list-unstyled'>
				{this.props.badges.map(badges => {
					return (
						<li key={badges.id} className='Badge__section-name-list'>
							<img src={badges.avatarUrl} className='Badge__avatar-list' />
							<div>
								{badges.firstName} {badges.lastName}
								<br />
								{badges.title}
								<br />
								<img src={tw_logo} className='tw__logo' />
								<span className='twitter__blue_font'>{badges.twitter}</span>
							</div>
						</li>
					);
				})}
			</ul>
		);
	}
}

export default BadgesList;

.Badge__section-name-list {
	background: #ffffff;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
	margin-bottom: 1rem;
	border-radius: 8px 8px 8px 8px;
	display: flex;
	padding: 1rem 0;
	width: 100%;
}

.Badge__avatar-list {
	border-radius: 50%;
	margin-right: 1rem;
	width: 70px;
	height: 70px;
	display: flex;
	margin-left: 1rem;
}
.twitter__blue_font {
	color: #38a1f3;
}
.tw__logo {
	width: 25px;
	height: 25px;
}

.Badges__hero {
  width: 100%;
  padding: 2rem 0;
  background: url('../../images/stars.svg'), #1B1B25;
  background-repeat: repeat;
  margin-bottom: 1rem;
}

.Badges__hero>.Badges__container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.Badges__container {
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  padding: 0 1rem;
}

.Badges_conf-logo {
  margin-bottom: 2rem;
}

.Badges__buttons {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

{
  "data": [
    {
      "id": "2de30c42-9deb-40fc-a41f-05e62b5939a7",
      "firstName": "Freda",
      "lastName": "Grady",
      "email": "Leann_Berge@gmail.com",
      "jobTitle": "Legacy Brand Director",
      "twitter": "FredaGrady22221-7573",
      "avatarUrl": "https://www.gravatar.com/avatar/f63a9c45aca0e7e7de0782a6b1dff40b?d=identicon"
    },
    {
      "id": "d00d3614-101a-44ca-b6c2-0be075aeed3d",
      "firstName": "Major",
      "lastName": "Rodriguez",
      "email": "Ilene66@hotmail.com",
      "jobTitle": "Human Research Architect",
      "twitter": "ajorRodriguez61545",
      "avatarUrl": "https://www.gravatar.com/avatar/d57a8be8cb9219609905da25d5f3e50a?d=identicon"
    },
    {
      "id": "63c03386-33a2-4512-9ac1-354ad7bec5e9",
      "firstName": "Daphney",
      "lastName": "Torphy",
      "email": "Ron61@hotmail.com",
      "jobTitle": "National Markets Officer",
      "twitter": "DaphneyTorphy96105",
      "avatarUrl": "https://www.gravatar.com/avatar/e74e87d40e55b9ff9791c78892e55cb7?d=identicon"
    }
  ]
}

import data from "./data.json";
import "./styles/Badges.css";
import confLogo from "../images/badge-header.svg";

class Badges extends Component {
  state = {
    data: [data.data]
  };

  render() {
    return (
      <div>
        <Navbar />

        <div className="Badges">
          <div className="Badges__hero">
            <div className="Badges__container">
              <img
                className="Badges_conf-logo"
                src={confLogo}
                alt="Conf Logo"
              />
            </div>
          </div>
        </div>

        <div className="Badge__container">
          <div className="Badges__buttons">
            <a href="/badges/new" className="btn btn-primary">
              New Badge
            </a>
          </div>

          <div className="Badges__list">
            <div className="Badges__container">
              <BadgesList badges={this.state.data} />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

class BadgesList extends Component {
  render() {
    const dataObj = Object.values(this.props.badges.data)[0];

    return (
      <ul className="list-unstyled">
        {dataObj.map(badge => {
          return (
            <li key={badge.id}>
              <p>
                {badge.firstName}
                {badge.lastName}
              </p>
            </li>
          );
        })}
      </ul>
    );
  }
}

Listas de componentes

Introducción a React.js

¿Qué es React.js?

Pre-requisitos

Herramientas que usaremos

Create-react-app

Fundamentos

Clonar el código de GitHub

ReactDOM.render

JSX

Creación y diseño de componentes

¿Qué es un componente?

Qué es y cómo funciona un componente en React.js

Nuestro primer componente

Cómo aplicar estilos

Props

Nuestra primera página

Enlazando eventos

Manejo de estado

Levantamiento del estado

Listas de componentes

React Router

Introducción a React Router

División de la aplicación en rutas

Mejorando la User Interface con un Layout

Component Lifecycle

Introducción del ciclo de vida de un componente

Práctica del ciclo de vida

Llamadas a un API

Introducción llamadas a un API

React.js: Cómo traer datos de un API en React

Solicitando datos (GET)

Mejorando la Experiencia de Usuario durante una petición

Enviando datos (POST)

Manejando los estados de la petición durante el POST

Actualizando datos (PUT)

Actualizaciones automáticas

Mejorando la UI

Los detalles de un Badge

UI Components y Container Components

Portales

Modales

Hooks

Search filter

Conclusion

Conclusión