Objects are not valid as a React child 오류 해결법

React Native로 작업 중 SectionList에 데이터를 넣는 과정에서 오류가 생겼다.

 

 

Objects are not valid as a React child (found: object with keys {maintag,subtag}). If you meant to render a collection of children, use an array instead.

 

해석하자면 Object는 React의 하위 개체로 유효하지 않다. (해당 객체에서 오류를 찾았다)

하위 개체를 랜더하기를 원한다면 배열로 넣어라.

여기서 객체 말고 배열로 데이터를 넣으면 아주 간단하게 해결된다.

 

- 하지만 배열로만 들어가서는 안되는 데이터는? 어떻게 해야할까???????

 

const DATA = [
  {
    title: {maintag: '메인', subtag: '서브'},
    data: [ { ... } ]
  ];

    <SafeAreaView>
      <SectionList
        sections={DATA}
        renderItem={({item}) => <Item item={item} />}
        renderSectionHeader={({section: {title}}) => (
          <>
            <Text>{ title?.maintag }</Text>
            <Text>{ title?.subtag }</Text>
          </>
          )}
      />
    </SafeAreaView>

해당 데이터를 넣을 renderSectionHeader에,

sections에 담은 DATA를 section으로 가져오고 그 안의 title을 가져온다.

Text 컴포넌트 내부에 데이터를 넣을 건데,

title 안에 있는 maintag라는 key의 값을 넣고

title 안에 있는 subtag라는 key의 값을 넣어라.

 

이렇게 넣으면 된다.