IntrinsicAttributes props in React Typescript component-CodePudding

Hello I have this message alert:

The type '{ children: string; notify: string; }' cannot be assigned to type 'IntrinsicAttributes & { notify: any; }'. Property 'children' does not exist on type 'IntrinsicAttributes & { notify: any; }'.ts(2322)

using Card component. This is the first time I get it.

this is the component:

const Card = (props:{notify:any}) => {
 
  if (props.notify.length> 0> 0){
    return <IonIcon icon={notifications}  id="iconoHomeCampana">  </IonIcon>

  }else{
    return <IonIcon icon={notificationsOff}  id="iconoHomeCampana">  </IonIcon>
  }
}


export interface newMessage{
  de:string
  ticket:string
}

const App= () => {

  const [notifications, setNotifications] =  useState < newMessage []> ( [])

  useEffect(() => {

  axios.get(url "chatsinleer/" props.email).then((resp: { data: any; }) => {
      if (resp.data!="bad"){
        setNotifications(resp.data.map((d: { de: any; ticket: any; }) => ({
          de:d.de,
          ticket:d.ticket,
          })));
      }
    })

  }, []);

return (
      <IonPage >
        <IonHeader>
          <IonToolbar>
            <IonGrid>
              <IonRow id="header">
                <IonCol id="columna" size="1.5"><IonButtons ><IonMenuButton /> </IonButtons></IonCol>
                <IonCol id="columna2" ><Busqueda categorias={categorias} setCategorias={setCategorias} setProveedorBuscadoHook={setProveedorBuscadoHook} setBuscar={setBuscar} /></IonCol>
                <IonCol id="columna3" size="1.5"> 
                  <Card notify={notifications}>  </Card>
                </IonCol>
              </IonRow>
            </IonGrid>
          </IonToolbar>
        </IonHeader>
    )
}

CodePudding user response：

You need to delete space inside <Card notify={notifications}> </Card>

and use it instead like <Card notify={notifications}></Card> or even better like this:

<Card notify={notifications}/>

Problem is that react perceived space as child element;

Here is simple repro which also gave same error:

const Comp1 = ({ a }: { a: boolean }) => {
  return null;
};

const Comp2 = () => {
  return <Comp1 a={true}> </Comp1>;
};

CodePudding user response：

The answer:

<Card> </Card> is the same as <Card>{" "}</Card> which means you are sending a space as a child of that component. Replace it for <Card {...props} /> and that will solve your problem as there is no children nodes.

The explanation:

JSX Docs:

JSX removes whitespace at the beginning and ending of a line. It also removes blank lines. New lines adjacent to tags are removed; new lines that occur in the middle of string literals are condensed into a single space.

And this issue.

Basically, spaces are considered meaningful in JSX, so avoiding them when not needed it's a good practice.

More nerdy stuff:

JSX.IntrinsicAttributes it's an interface that allows you to globally extend the attributes of JSX nodes, for example, key in React.

React does not include the children prop in IntrinsicAttributes so, when a component needs to render children it is necessary to explicitly add it to the props type definition.

More info here