I recently began learning Next.js and have encountered an issue while trying to pass props from a parent component to a child component. The error message I'm seeing is:
Type '({ name }: { name: any; }) => JSX.Element' is not assignable to type 'NextPage<{}, {}>'.
Type '({ name }: { name: any; }) => JSX.Element' is not assignable to type 'FunctionComponent<{}> & { getInitialProps?(context: NextPageContext): {} | Promise<{}>; }'.
Type '({ name }: { name: any; }) => JSX.Element' is not assignable to type 'FunctionComponent<{}>'.
Code
import type { GetServerSideProps, NextPage } from 'next';
import PositionData from './positionContainer';
const Home: NextPage = () => {
return (
<div>
Weather
<PositionData name={'hello'}/>
</div>
);
};
export default Home;
And component with error:
import { NextPage } from "next";
const PositionData: NextPage = ({name}:{name: any}) =>{
return (
<>
<p>Current name is: {name}</p>
</>
);
};
export default PositionData;