Why are all the properties I pass to the component displayed at once?

Question

React

Can you tell me how to properly pass properties to the 'Description' component? I have an array 'name', I use 'map' to get only 1 name from it, but I get all the names at once.

I do the same with 'Main', but everything is displayed correctly there.

Please help me fix the error.

It should look like this:

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...
In this sandbox, I decided everything, you just need to pass in the Description not an id (as you had) but a whole array of names, and then, depending on the card id (params.id), substitute the name from the array at the index of the clicked card: I do minus 1 because everything in the array is counted from zero, and when I click on the first card, for example, it gives me the number 1, which would not be correct when displayed. PS It's better not to do it like you did in this.state:<p>name is {this.props.names[params.id - 1]}</p>

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

Because the username, for example, kate, is lying around in one array, and the card id is in another.
This is not the right thing to do, you need to store information better:

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

or, for example, if there are accounts in the service (if there are such projects), then it’s better to do this (but if there are accounts, then without a database, and just with cards too):

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