JavaScript - Map() 함수 에러

• 자바스크립트에 대한 기초가 부족해서 생긴 에러인 것 같다.

const textsList = texts.map((t) => (
    <a href={t.id}>
      <li key={t.id}>{t}</li>
    </a>
  ));

• 위와 같이 map()을 통해서 새로운 배열을 만들었고,

const TextList = ({ textsList }) => {
  return (
    <div id="TextListContainer">
      <ol>{textsList}</ol>
    </div>
  );
};

• 위와 같이 값을 불러오려 하는데
• Objects are not valid as a React child (found: object with keys {id, author, text}). If you meant to render a collection of children, use an array instead.
• 같은 에러가 뜨거나 혹은 안의 값에 접근하려면 textsList[0].props.children ...
• 이런 식으로 직접 접근을 해야 했어서 렌더링을 원하는 대로 할 수가 없었다.(한번에 나오게)

모를 땐 고민을 하되, 너무 길어지면 Stack Overflow에 질문을 올리자!!

• Stack Overflow에 질문을 하니 String 관련한 이슈라고 하였다.

const textsList = texts.map((t) => (
    <a href={t.id}>
      <li key={t.id}>{t.author}</li>
    </a>
));
// JSON.stringify(t); 이런 식으로 작성해서 원하는 값만 추출해도 된다.

• List 안의 값을 t 에서 t.author로만 바꾸었을 뿐인데 원하는 방식으로 작동하였다.
• 친한 형에게도 물어보니까 HTML은 기본적으로 렌더링할 수 있는 타입이 따로 있다고 한다.(파싱에러 - 객체는 html에서 파싱을 못 함)

결론 - 앞으로 위와 같은 mapping 에러가 발생하면 애초에 String 형태로 불러오든가 JSON.stringify(t); 이런 식으로 작성해보자