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

Question

[Killimy]

Подскажите, как правильно передать свойства компоненту 'Description' ? У меня есть массив 'name', я использую 'map', чтобы получить из него только 1 имя, но я получаю все имена сразу.

То же самое я делаю с 'Main', но там все отображается корректно.

Пожалуйста, помогите мне исправить ошибку.

Это должно выглядеть так :

1 --> this page is 1. name is kate
2 --> this page is 2. name is jhnon
3 --> this page is 3. name is michael

https://codesandbox.io/s/inspiring-dust-w2cnf?file...

Answer 1

[Дуболом Одноклеточный]

https://codesandbox.io/s/card-routing-forqna-js-re...
В этом sandbox'e я решил все, просто нужно передавать в Description не id (как было у тебя) а целый массив names, и потом в зависимости от id карточки (params.id) подставлять имя из массива по индексу кликнутой карточки: <p>name is {this.props.names[params.id - 1]}</p>
минус 1 я делаю потому что в массиве все считается с нуля, а при нажатии на например первую карточку, мне выдает цифру 1, что было бы не правильно при отображении.

P.S.
Так лучше не делать, как ты сделал в this.state:

this.state = {
  card: [1, 2, 3],
  names: ["kate", "jhon", "michael"]
};

Потому что имя пользователя например kate валяется в одном массиве, а id карточки в другом.
Так не правильно делать, нужно хранить информацию более лучше:

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

или, если например в сервисе (если будут такие проекты) есть аккаунты, то лучше делать так (но с аккаунтами если будет, то без базы данных ни как, да и просто с карточками тоже):

this.state = {
  users: [
    { user_id: 1, user_name: "kate", /* и прочая информация */ }
  ],
  cards: [
    { card_id: 1, creator_id: 1 /* эту карточку создала kate под айдишником 1 */ } 
    // например создатель карточки, и после по этому id ты можешь достать инфу о этом создателе
  ]
};

Comments

[Killimy]

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

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

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?

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

[Дуболом Одноклеточный]

Killimy,
Лучше не user_name а creator_id записывать

this.state = {
  users: [
    { user_id: 1, user_name: "kate", /* и прочая информация */ }
  ],
  cards: [
    { card_id: 1, creator_id: 1 /* эту карточку создала kate под айдишником 1 */ } 
    // например создатель карточки, и после по этому id ты можешь достать инфу о этом 
   // создателе
  ]
};

В App.js:

<Route path="/api/events/:id">
  return <Description cards={cards} /> // с сервера прилетает массив cards и users
</Route>

А в Description js:

import React from "react";
import { withRouter } from "react-router-dom";
import "./styles.css";

class Description extends React.Component {
  render() {
    const { params } = this.props.match;
    const creatorInfo = this.props.cards; // получил массив с сервера
    const creatorAccount = users.find(creatorInfo.creator_id); // Например в массиве users от 
    // сервера, ищешь создателя по id

    return (
      <div>
        <p>this page is {params.id}</p>
        <p>name is {creatorAccount.user_name}</p> // тут пишется user_name из аккаунта 
        // создателя карточки, также можешь получить id создателя creatorAccount.user_id
       // и все остальные данные
      </div>
    );
  }
}

export default withRouter(Description);