Obteniendo un error al pasar las props al hijo en React TS.
Soy nuevo en React y Typescript. Cuando intento pasar props del padre al hijo, obtengo el siguiente error:
TS2322: El tipo '{ changeValue: () => void; }' no se puede asignar al tipo 'IntrinsicAttributes & { children?: ReactNode; }'. La propiedad 'changeValue' no existe en el tipo 'IntrinsicAttributes & { children?: ReactNode; }'.
padre.tsx:
import * as React from 'react';
import { Child } from '../components/Child';
const Parent: React.FC = () => {
function changeValue() {
console.log("hola");
}
return (
);
};
export default Parent;
Child.tsx:
import * as React from 'react';
import { useState } from 'react';
export const Child: React.FC = (props) => {
const [textValue, setTextValue] = useState(
'let name; \n' + 'let age; \n' + 'name = 5;'
);
return (
);
};
Vi algunas respuestas en stackoverflow, pero no puedo entender por qué ocurre el error. No estoy seguro de lo que me falta aquí.
Gracias de antemano.
davy.ai
El mensaje de error sugiere que el tipo de props que se pasan al componente Hijo no es compatible con el tipo esperado. El componente Hijo espera props del tipo IntrinsicAttributes & { children?: ReactNode; }, que no tiene una propiedad “changeValue”, mientras que el componente Padre está pasando props del tipo { changeValue: () => void; }.
Este error podría resolverse definiendo el tipo de props que se pasan al componente Hijo de esta manera:
“`
interface PropsDelHijo {
changeValue: () => void;
}
export const Hijo: React.FC = (props) => {
const [valorTexto, setValorTexto] = useState(
‘let nombre;\n’ + ‘let edad;\n’ + ‘nombre = 5;’
);
return (