Применить метод .map к массиву объектов.

Question

Есть массив объектов. Мне нужно применить метод .map к нему

const friends = [
{"id": 1, "name": "OLIVER", "age":"15"},
{"id": 2, "name": "JACK", "age":"17"},
{"id": 3, "name": "AMELIA", "age":"20"},
{"id": 4, "name": "AMELIA", "age":"23"},
{"id": 5, "name": "EMILY", "age":"25"},
]

Вот вариант, который я пытался сделать, но не смог:

render() {  
    return(
      <table className="table">
  <thead>
    <tr>     
      <th>id/th>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
     {friends.map(p =>
    <tr>   
      <td key={p.id}>{p.id}</td>
      <td key={p.id}>{p.Name}</td>
      <td key={p.id}>{p.Age}</td>
    </tr> 
)
}   
  </tbody>
</table>
)
}

Что я делаю не так?

Answer 1

Вы ссылаетесь на неправильные свойства, должны быть "age", "name". А может быть просто добавить ключ к вашему родительскому элементу.

 <tr key={p.id}>   
      <td >{p.id}</td>
      <td>{p.name}</td>
      <td>{p.age}</td>
 </tr>

Answer 2

Вы используете неправильные свойства, должны быть в нижнем регистре (равно определению друзей), также осталось две круглые скобки.

render() {  
    return(
      <table className="table">
  <thead>
    <tr>     
      <th>id/th>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
     {friends.map((p) => (
    <tr>   
      <td key={p.id}>{p.id}</td>
      <td key={p.id}>{p.name}</td>
      <td key={p.id}>{p.age}</td>
    </tr> 
))
}   
  </tbody>
</table>
)
}

Answer 3

Ключи объектов чувствительны к регистру в js, поэтому p.Name - это не значение в friends, а p.name -.

Answer 4

Есть оператор возврата внутри функции карты.

render() {
  return (
    <table className="table">
      <thead>
        <tr>
          <th>id/th>
    <th>Name</th>
            <th>Age</th>
  </tr>
</thead>
        <tbody>
          {friends.map(p =>
            return(<tr>
              <td key={p.id}>{p.id}</td>
              <td key={p.id}>{p.Name}</td>
              <td key={p.id}>{p.Age}</td>
            </tr>)
          )
          }
        </tbody>
</table>
      )
}