React: Карточка пользователя

Первый день: сделай так, чтобы компонент UserCard принимал имя и email через пропсы и отображал их внутри карточки.

Добро пожаловать в команду! Алекс наконец-то пробил для тебя все доступы и сразу выдает первую задачу. Наша CRM уже хранит данные коллег, осталось отрендерить их в интерфейсе. Твой компонент увидит вся команда, так что доведи карточку до презентабельного вида.

Что нужно сделать

Добавь в UserCard пропсы name и email, выведи их в заголовке и подписи.
В App вызови UserCard четыре раза, передав данные для Александра Ермолова, Марины Морозовой, Ильи Лебедева и Ксении Волковой.
Оставь аккуратные дефолты 'Имя пользователя' и email@example.com на случай, если данные не прилетят.
Не используй map или другие циклы при рендере — просто передай нужные значения вручную.

Данные для карточек

[
  { name: 'Александр Ермолов', email: 'alex@easyadvice.dev' },
  { name: 'Марина Морозова', email: 'marina@easyadvice.dev' },
  { name: 'Илья Лебедев', email: 'ilya@easyadvice.dev' },
  { name: 'Ксения Волкова', email: 'kseniia@easyadvice.dev' }
]

Используй эти данные и выведи каждую карточку на отдельном UserCard.

Финальный результат должен быть таким: Александр, тимлид React-стажировки

💡 Подсказка

Пропсы в функциональном компоненте можно деструктурировать: function UserCard({ name, email }) { ... }.
Передавай значения при вызове: <UserCard name={member.name} email={member.email} />.
Можно взять значения из массива teammates по индексу: teammates[0], teammates[1] и т.д. Главное — не используй map, а передай пропсы вручную.
Для дефолтов задай значения по умолчанию прямо в сигнатуре: { name = 'Имя пользователя', email = 'email@example.com' }.
Документация: react.dev/learn/passing-props-to-a-component

👀 Решение

import React from 'react';
import './styles.css';
 
const teammates = [
  { id: 1, name: 'Александр Ермолов', email: 'alex@easyadvice.dev' },
  { id: 2, name: 'Марина Морозова', email: 'marina@easyadvice.dev' },
  { id: 3, name: 'Илья Лебедев', email: 'ilya@easyadvice.dev' },
  { id: 4, name: 'Ксения Волкова', email: 'kseniia@easyadvice.dev' },
];
 
export function UserCard({
  name = 'Имя пользователя',
  email = 'email@example.com',
}) {
  return (
    <article className="user-card" data-testid="user-card">
      <h2 className="user-card__name">{name}</h2>
      <p className="user-card__email">{email}</p>
    </article>
  );
}
 
export default function App() {
  return (
    <main className="challenge-container">
      <section className="challenge-cards">
        <UserCard name={teammates[0].name} email={teammates[0].email} />
        <UserCard name={teammates[1].name} email={teammates[1].email} />
        <UserCard name={teammates[2].name} email={teammates[2].email} />
        <UserCard name={teammates[3].name} email={teammates[3].email} />
      </section>
    </main>
  );
}

Почему это работает: UserCard принимает имя и email через пропсы, поэтому его легко переиспользовать. Мы положили данные в массив teammates, но передаём их вручную в каждый <UserCard />, что соответствует задаче без использования map. Дефолты остаются на случай, если данные не прилетят.

Что нужно сделать

Данные для карточек

React: Карточка пользователя

Что нужно сделать

Данные для карточек

🧑‍💻 Это не баг! Это фича!