CODEWITHSUNDEEP
reactjstypescript
Julián Oviedo
Julián Oviedo

Reputation: 730

IntrinsicAttributes props in React Typescript component

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>
    )
}

Upvotes: 1

Views: 11897

Answers (3)

J. Pichardo
J. Pichardo

Reputation: 3115

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 won't be any 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

Upvotes: 4

Ruben Verster
Ruben Verster

Reputation: 362

here man


interface ISetAuth {
  setAuth: Dispatch<SetStateAction<boolean>>;
}

const Login = ({ setAuth }: ISetAuth) => {

}

I struggled for 40min with this... :')

Upvotes: 0

valerii15298
valerii15298

Reputation: 869

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>;
};

Upvotes: 2

Related Questions