Objective
I want to fetch data in App's root component via useEffect()
(and set them to state) and then pass state to my custom component. I can do it with JS but the same steps don't work with Typescript.
My error message is the following:
Type '{ obj: Person; }' is not assignable to type 'IntrinsicAttributes
& Person & { children?: ReactNode; }'. Property 'obj' does not exist
on type 'IntrinsicAttributes & Person & { children?: ReactNode; }'.TS2322
To me, it looks like I have an object with Person type I can't assign to another type of Person...
App.tsx
import React, { useState, useEffect } from 'react';
import Profile from '../Profile';
export interface Person {
name: string;
email: string;
dob: string;
address: string;
number: string;
userName: string;
pssw: string;
};
const initPerson: Person = {
name: "",
email: "",
dob: "",
address: "",
number: "",
userName: "",
pssw: ""
};
const App: React.FC = () => {
const [ profile, setProfile ] = useState<Person>(initPerson)
useEffect(() => {
// logic for fetching data and setting the state
}, []);
return (
<div id="app">
<h1>Random user generator</h1>
<div id="content">
<Profile obj={profile} />
</div>
);
}
export default App;
Person.tsx
import React from 'react';
import { Person } from './app/App'
const Profile: React.FC<Person> = (props) => {
return (
<div id="Card">
{/* photo */}
<div id="photo"><img src="" alt="profile" /></div>
{/* name */}
<div id="name"></div>
{/* email */}
<div id="email"></div>
{/* dob */}
<div id="dob"></div>
{/* adress */}
<div id="address"></div>
{/* number */}
<div id="number"></div>
{/* pssw */}
<div id="password"></div>
</div>
);
}
export default Profile;
I could not find any relevant YT video nor previous post here... Based on these questions (here and here) I think I need to declare the interface of my component?
If so:
- Where?
- Why do I need to declare the interface of my component if I have already defined interface for Person that I am passing to my component?
- How should the declaration look like?
- What is the error telling me?
- How should I pass data to the child component correctly? (and also from child to parent)
- Also is there something else I should know?
Any help is very appreciated. Thank you!