2

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!

3 Answers 3

5

The issue is that this

const Profile: React.FC<Person>

should be this

const Profile: React.FC<{ obj: Person }>

That is, props isn't of type Person, you have a obj prop in Profile which is of type Person.

The type parameter T in React.FC<T> needs to be the shape of all your custom props, on top of the built in React ones (i.e. children) - so basically an object with fields.

For instance if you had another prop foo which should be a number, it would be React.FC<{ obj: Person, foo: number }>, etc.

1
  • Hi @davciwill and thanks for your answer. It helped. Now I understand how to create an interface for props I am passing to my child component. For future readers, I would like to also point out on @Luis Paulo Pinto answer where he makes an interface for props. Aug 22, 2020 at 6:46
0

You are passing a prop shape that's actually

export interface Person {
  obj: {
    name: string;
    email: string;
    dob: string;
    address: string;
    number: string;
    userName: string;
    pssw: string;
  }
};

but you declared

export interface Person {
  name: string;
  email: string;
  dob: string;
  address: string;
  number: string;
  userName: string;
  pssw: string;
};

Since I see you like to learn and try things out, I'll let you figure out where the adjustment can be done! If not, let me know and I'll add more details.

1
  • Hi, thank you for your help. I understand what you tried to tell me (and also read other answers). I also now understand that I am passing obj: Person. OK, I think I get it now. In JS I am used to destructuring props and therefore use {obj} instead of props.obj. That's the same in typescript I just need to correctly define all props I am passing. Aug 22, 2020 at 6:43
0

You can do something like that:

// Here you create an interface for Profile component that receives an "obj" prop of Person type.
interface ProfileProps {
  obj: Person;
}

const Profile: React.FC<ProfileProps> = (props) => {
   console.log(props.obj);
   return (
   ....

And now you will be good, because when you set Profile tag in App Component you are passing the obj prop:

<Profile obj={profile} />
2
  • Hi and thank you for your answer. It also definitely help. My questions if the name ProfileProps (or rather componentName + Props) is mandatory naming or if I can pick some other random name for ProfileProps. Is it convention or has it some other meaning/purpose? Aug 22, 2020 at 6:49
  • 1
    Hi Lukas, its just a convention that i use, for me it let the code more readable - When i see something like this Profile: React.FC<ProfileProps> i know this Component has some custom props. But basically you can name it any way you want and find a convention that makes you more comfortable. Aug 22, 2020 at 13:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.