Received warning unique key prop while i don't use any list

Question

I've received warning like this

Warning: Each child in a list should have a unique "key" prop.%s%s See fb.me/react-warning-keys for more information.%s,

Check the render method of MainScreen., , in MainHeader (at MainScreen.js:164) in MainScreen (created by SceneView)

And it pointed to one of my component called MainHeader and when i commented it, the warning is gone. Here's my MainHeader looks like

const MainHeader = () => {
      return (
        <Header noLeft style={appStyles.headerBackgroundColor}>
            <Body>
              <Title style={appStyles.appTitle}>Whatsapp</Title>
            </Body>
            <Right>
              <Button 
                transparent 
                style={{marginRight:5}}
                onPress={() => {
                  this.setState({searchMode: true})
                }}
              >
                <Icon type= 'Octicons' name= 'search'/>
              </Button>
              <PopupMenu type= 'main'/>
            </Right>
        </Header>
      )
    }

As far as i know this warning only appeared in list, can someone explain to me what's going on?

Update: I feel like maybe something is wrong with my way using my component, because i tried to return it to null but the warning still appearing.

This is the line where i called my component

showAction ?
              <SelectHeader
                onBack= {resetChatSelected}
                itemCount= {chatSelected.length}
                ComponentRight= {ComponentRight}
              /> :
              <MainHeader/>

It's may occur in one of your child components of your MainHeader. So it's better to share a minimal, reproducible example for us. — SMAKSS
The error says: Check the render method of MainScreen. so maybe check the keys given in that file? — HMR
I'm mainly using nativebase component, and i've just tried to return null but the warning still appearing @SMAKSS — Hanif Nr

Hanif Nr Hanif Nr · Accepted Answer · 2020-05-12T07:47:12

This is happened because i have two different component for my statement, so i have to provide key for each of them.

showAction ?
              <SelectHeader
                onBack= {resetChatSelected}
                itemCount= {chatSelected.length}
                ComponentRight= {ComponentRight}
                key={0}
              /> :
              <MainHeader key={1}/>

Received warning unique key prop while i don't use any list

1 Answers