如何使用 react 和 typescript 修复 object 可能是可重用组件中未定义的错误？

Question

I am getting error object is possibly undefined when i use the variable "items_count".

what i am trying to do? I have an ContainerComponent that uses ContentComponent which displays an icon. This ContentComponent is a reusable component.

Below is my ContainerComponent

render = () => {
    const items_count = 10; //got by http request and its value could be undefined, 0 or anything 
    //above 0
    return (
        <Wrapper>
            <LeftSide>
                <ContainerComponent>
                    <ContentComponent>
                        items_count=10
                        icon_name='add'
                    </ContentComponent>
               </ContainerComponent>
           </LeftSide>
           <RightSide>
               <ContainerComponent>
                   <ContentComponent>
                       icon_name='delete'
                   </ContentComponent>
               </ContainerComponent>
           </RightSide>
       </Wrapper>
   ) 

}

ContentComponent renders the Icon and it looks like below,

const ContentComponent: React.FC<Props> = ({
    icon_name,
    items_count,
}) => {
    return (
        {condition1 && condition2 &&
            (icon_name === 'add' && items_count < 1 ? null : ( //here i get error object items_count 
            //could be possibly undefined
                <firstdiv>
                   <seconddiv>
                       <Icon name={icon_name} />
                   </seconddiv>
                </firstdiv>
            ))}
    )
}

To fix the error i have tried something like below

return (
    {condition1 && condition2 && items_count && //added a check here
        (icon_name === 'add' && items_count < 1 ? null : (
            <firstdiv>
                <seconddiv>
                    <Icon name={icon_name} />
                </seconddiv>
            </firstdiv>
     ))}
)

But as you see in the ContainerComponent RightSide component i dont pass the items_count and within ContentsComponent i want this icon with name delete to render always irrespective of items_count value. and icon with name add to render only when items_count value is greater than 0.

that check in my snippet works but gives error item_count could be possibly undefined. how can i fix it..could someone help me with this. thanks.

Answer 1

This will always show the delete icon, and sometimes the add icon will show side by side with the delete icon

 /* U just need to change the structure of your code */ const ContentComponent: React.FC<Props> = ({ icon_name, items_count, }) => { const renderIcon = () => { if(?condition1 ||:condition2 || !items_count) return null return ( <firstdiv> <seconddiv> <Icon name='delete'} /> {items_count > 0 ? <Icon name='add'} /> : null } </seconddiv> </firstdiv> ) } return ( <> {renderIcon()} </> ) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>