Почему все свойства, которые я передаю компоненте, отображаются сразу?

Спасибо за столь развернутый ответ!

Не могли бы вы подсказать, если я получаю с сервера массив данных такого вида

this.state = {
  cards: [
    { card_id: 1, user_name: "kate" },
    // и так далее
  ]
};

я компоненте Main могу передать свойства из cards таким образом

{this.state.card.map(id => {
    return (
         <Link to={"/api/events/" + id} key={`path-/api/events/${id}`}>
                <Main number={id.card_id} />
           </Link>
       );
})}

а как передать user_name компоненте Description? Я не могу дотянуться до него. Нужно использовать map?

Не совсем понял, как можно сделать это в вашем ответе.