-2

I want to make the content and userId visible in the UI in the comments. But it doesn't react.

This is an array of productinfo.

console.log

Object
Brand: "5"
Carts: []
Cody: "3"
Comments: Array(27)
0: {id: 28, content: "ㅂㅈㄱ", createdAt: "2021-05-21T01:27:39.000Z", updatedAt: "2021-05-21T01:27:39.000Z", UserId: 1, …}
1: {id: 27, content: "12412", createdAt: "2021-05-21T01:25:29.000Z", updatedAt: "2021-05-21T01:25:29.000Z", UserId: 1, …}
2: {id: 26, content: "124", createdAt: "2021-05-21T01:25:28.000Z", updatedAt: "2021-05-21T01:25:28.000Z", UserId: 1, …}
3: {id: 25, content: "79", createdAt: "2021-05-21T01:25:24.000Z", updatedAt: "2021-05-21T01:25:24.000Z", UserId: 1, …}
4: {id: 24, content: "qwr", createdAt: "2021-05-21T01:23:33.000Z", updatedAt: "2021-05-21T01:23:33.000Z", UserId: 1, …}
5: {id: 23, content: "214", createdAt: "2021-05-21T01:21:25.000Z", updatedAt: "2021-05-21T01:21:25.000Z", UserId: 1, …}
6: {id: 22, content: "21", createdAt: "2021-05-21T01:21:20.000Z", updatedAt: "2021-05-21T01:21:20.000Z", UserId: 1, …}
7: {id: 21, content: "ㅂㅈㄱ", createdAt: "2021-05-21T01:20:43.000Z", updatedAt: "2021-05-21T01:20:43.000Z", UserId: 1, …}
8: {id: 20, content: "24", createdAt: "2021-05-21T01:17:44.000Z", updatedAt: "2021-05-21T01:17:44.000Z", UserId: 1, …}
9: {id: 19, content: "123", createdAt: "2021-05-21T01:17:06.000Z", updatedAt: "2021-05-21T01:17:06.000Z", UserId: 1, …}
10: {id: 18, content: "333", createdAt: "2021-05-21T00:51:18.000Z", updatedAt: "2021-05-21T00:51:18.000Z", UserId: 1, …}
11: {id: 17, content: "qwr", createdAt: "2021-05-20T23:16:34.000Z", updatedAt: "2021-05-20T23:16:34.000Z", UserId: 1, …}
12: {id: 16, content: "152", createdAt: "2021-05-20T23:16:26.000Z", updatedAt: "2021-05-20T23:16:26.000Z", UserId: 1, …}
13: {id: 15, content: "w", createdAt: "2021-05-20T23:14:39.000Z", updatedAt: "2021-05-20T23:14:39.000Z", UserId: 1, …}
14: {id: 14, content: "qwr", createdAt: "2021-05-20T23:12:35.000Z", updatedAt: "2021-05-20T23:12:35.000Z", UserId: 1, …}
15: {id: 13, content: "12", createdAt: "2021-05-20T23:12:23.000Z", updatedAt: "2021-05-20T23:12:23.000Z", UserId: 1, …}
16: {id: 12, content: "123", createdAt: "2021-05-20T23:11:17.000Z", updatedAt: "2021-05-20T23:11:17.000Z", UserId: 1, …}
17: {id: 11, content: "as", createdAt: "2021-05-20T23:10:28.000Z", updatedAt: "2021-05-20T23:10:28.000Z", UserId: 1, …}
18: {id: 10, content: "아싸", createdAt: "2021-05-20T23:06:44.000Z", updatedAt: "2021-05-20T23:06:44.000Z", UserId: 1, …}
19: {id: 9, content: "a", createdAt: "2021-05-20T22:06:34.000Z", updatedAt: "2021-05-20T22:06:34.000Z", UserId: 1, …}
20: {id: 8, content: "ㄱㅈㄱ", createdAt: "2021-05-20T21:58:32.000Z", updatedAt: "2021-05-20T21:58:32.000Z", UserId: 1, …}
21: {id: 7, content: "야호", createdAt: "2021-05-20T21:57:34.000Z", updatedAt: "2021-05-20T21:57:34.000Z", UserId: 1, …}
22: {id: 6, content: "ㅁㄴㅇ", createdAt: "2021-05-20T21:53:26.000Z", updatedAt: "2021-05-20T21:53:26.000Z", UserId: 1, …}
23: {id: 5, content: "야호", createdAt: "2021-05-20T21:53:16.000Z", updatedAt: "2021-05-20T21:53:16.000Z", UserId: 1, …}
24: {id: 4, content: "야호", createdAt: "2021-05-20T21:51:39.000Z", updatedAt: "2021-05-20T21:51:39.000Z", UserId: 1, …}
25: {id: 3, content: "야호", createdAt: "2021-05-20T21:51:06.000Z", updatedAt: "2021-05-20T21:51:06.000Z", UserId: 1, …}
26: {id: 2, content: "바보", createdAt: "2021-05-20T05:24:21.000Z", updatedAt: "2021-05-20T05:24:21.000Z", UserId: 1, …}
length: 27

After entering the code like this, I tried to print the content, but it did not respond. I don't know how to fix that code.

 <ul>
    {productinfo.Comments.map((content, id) =>  // currentIndex, index -> 
      <li key={id} productinfo={content} />
    )} 
  </ul>

enter image description here

김민수
  • 29
  • 6
  • Welcome to SO! This would benefit from a runnable [mcve] to remove any ambiguity, but `{content}` doesn't seem right. That's an object and should cause React to throw. Normally, you'd need to pick out primitive properties from the object, like `content.content` (yes, the variable name here is a little weird -- you may have intended to use destructuring with `({content, id})`). – ggorlen May 21 '21 at 02:06

1 Answers1

0

<li> is nothing but a standard HTML tag. The issue is not about the map() function, but about you use <li> wrong.

<ul>
  {productinfo.Comments.map((content, id) => (
    <li key={id}>
      {content}
    </li>
  ))}
</ul>

If content is not a string, then you have to create a custom component to handle it.

Matthew Kwong
  • 2,548
  • 2
  • 11
  • 22