Why does it complain about type {intrinsicattributes && true} or type {intrinsicattributes && false} are not assignable using react and typescript?

Question

i have code like below,

 function Parent() {
     const count1 = 2;
     const count2 = 4;
     const isCount = count1 < 0 || count2 < 0; //setting isCount here
     return show ? (
         <Dialog>
             <Body>soemthing</Body>
             <Actions
                 isAdminAndisCount={isAdminAndisCount}
             > 
                 {((isAdmin && !isCount) || !isAdmin) && (
                     <Text onClick={onHide}>Close</Text>
                 )}
                 {isAdmin ? ( //to refactor this
                     isCount ? (
                         <a href="eee">email us</a>          
                      ) : ( 
                          <a href="mmm">add</a>
                      )
                  ) : null}
              </Actions>
          </Dialog>
      ) : null; 
  }

this works fine but refactored this code

{isAdmin ? ( //to refactor this
    isCount ? (
        <a href="eee">email us</a>          
    ) : (
        <a href="mmm">add</a>
    )
) : null}

 **TO**
const RenderLink = ( isCount: boolean ) =>
    isCount ? <a href="eee">email us</a> : <a href="mmm">add</a>;

{isAdmin && <RenderLink isCount={isCount} />} //here is the error

But this displays link for email us even though !isCount and i see error

error "type {isCount: boolean is not assignable to type {intrinisicAttributes && false} or type {intrinsicAttributes && true}

Could someone help me fix this. thanks.

Answer 1

The first arg in React functional components is their props which is an object of received props. So change this line:

const RenderLink = ( isCount: boolean ) =>

To:

interface Props {
   isCount: boolean
}
const RenderLink: React.FC<Props> = ({isCount}) =>

Why does it complain about type {intrinsicattributes && true} or type {intrinsicattributes && false} are not assignable using react and typescript?

Question

1 answers

solution1
1 ACCPTED 2020-06-07 07:14:52

Why does it complain about type {intrinsicattributes && true} or type {intrinsicattributes && false} are not assignable using react and typescript?

Question

1 answers

solution1 1 ACCPTED 2020-06-07 07:14:52

solution1
1 ACCPTED 2020-06-07 07:14:52