Estoy desarrollando un proyecto donde tengo un Context , y recibí este error al intentar usar el Provider :
Type '{ children: Element[]; }' is not assignable to type 'IntrinsicAttributes & ReactNode'. Type '{ children: Element[]; }' is missing the following properties from type 'ReactPortal': key, type, propsPágina principal.tsx
import { Form } from "../../components/Form"; import { Greet } from "../../components/Greet"; import { UserProvider } from "../../context/UserContext"; const Mainpage: React.FC = () => { return( <div> <UserProvider> // **ERROR HERE !!!** <> <Greet /> <Form /> </> </UserProvider> </div> ) } export default Mainpage;UserContext.tsx
import React, { Component, createContext, ReactChild, ReactNode, useState } from "react"; type ContextType={ name?:string, email?:string, submit?: (param?:any, param2?:any)=> void } export const UserContext = createContext<ContextType | null> (null); export const UserProvider: React.FC<React.ReactNode> = (children) => { const [name, setName] = useState('') const [email, setEmail] = useState('') const onSubmit = (name:string, email:string ) => { console.log('Submit App: ' + name, email) setName(name) setEmail(email) } return( <UserContext.Provider value={{name, email, submit: onSubmit}}> {children} </UserContext.Provider> ) }UserProvider se define como un componente de React y acepta solo un UserProvider: React.FC<React.ReactNode>
Puede envolver <Greet /> y <Form/> dentro de un fragmento
<> <Greet/> <Form/> </> .... const Mainpage: React.FC = () => { return( <div> <UserProvider> // **ERROR HERE !!!** <> <Greet/> <Form/> </> </UserProvider> </div> ) } export default Mainpage;ACTUALIZAR :
el problema esta aqui
.... export const UserProvider: React.FC = (children) => { // << look at children .... children es un accesorio y debe desestructurarse ({ children }) o usarse desde props.children en su caso children.children
... export const UserProvider: React.FC = ({ children }) => { ...Al configurar explícitamente React.ReactNode como accesorios de su componente, está diciendo que solo habrá un nodo como hijo y actualmente tiene 2 nodos como hijos.
Cambia esto:
export const UserProvider: React.FC<React.ReactNode> = () => {...}A esto:
export const UserProvider: React.FC = () => {...} Una opción alternativa es envolver a los children en un React Fragment como este:
<UserProvider> // **ERROR HERE !!!** <> <Greet /> <Form /> </> </UserProvider>