Question 66435 in Javascript Question posted in
A very good W3school tutorial can be found here.

How can I type the props in the react typescript? – Javascript

How can I type the props in the react typescript ? I’m getting the error Property ‘authors’ does not exist on type ‘[Props] & { children?: ReactNode; }’.ts. I’m expecting to pass an array wich consists of name and password keys.

https://codesandbox.io/s/test-login-page-tasks-24-04-forked-eg91s5?file=/src/components/Login.tsx:229-274

type Props = {
  authors: {
    name: string;
    password: string;
  }[];
};

const Login: FC<[Props]> = ({ authors }) => {
  return (
  ...
  )
}

, even though I’m passing the props.

Tags:

4

Answers


  1. 0

    Try changing the [Props] to Props like following

    const Login: FC<Props> = ({ authors }) => { ... }

    Now it will work because it’s expecting object not array, we will pass an object like <Login authors={authors} />. Now authors will be an array of objects.

    Login or Signup to reply.
  2. 0

    You defined IUser interface and defined name,password states with IUser type that’s will cause a problem because when you define this:

    const [name, setName] = useState<IUser>("");
// name will expected to be 
name = {
    name: 'name',
    password: 'password'
}

    and that’s wrong because name,password is a string so try to define it like this:

    const [name, setName] = useState<IUser["name"]>("");
const [password, setPassword] = useState<IUser["password"]>("");

    then you have to fix passing authors to your FC component:

    const Login: FC<Props> // instead of <[Props]>

    last thing you have to fix this type to match the type of data you passed it from App.tsx:

    type Props = {
    authors: {
       author_name: string; // instead of name
       password: string;
    }[];
};


// because you are passing and comparing here with author_name not with name

const userData = authors.find(
  (user) => user.author_name === name && user.password === password
);

    and you passed it from App like this:

    const Authors = [
   {
      id: "001",
      author_name: "John Smith", // not a name
      password: "123"
   }
 ];
    Login or Signup to reply.
  3. 0

    You can either use type or interface to describe props.
    Usually interface is used for describing objects.
    It’s also a nice convention to start interfaces with letter I and types with T.

    interface IAuthor {
  name: string;
  password: string;
}

const Login = ({ authors }: { authors: IAuthor[] ): JSX.Element => {
  return (
    ...
  )
}

    In the above example, the Login component expects a prop authors that is an array of objects described by IAuthor e.g.

    authors = [
  {
    name: "Spiderman"
    password: "maryjane"
  },
  { 
    name: "Superman"
    password: "loislane"
  }
]

    Hope this helps.

    Login or Signup to reply.
  4. 0 
            type Props = {
          authors: {
            name: string;
            password: string;
          }[];
        };
        
        const Login: FC<Props> = ({ authors }) => {
          const history = useHistory();
          const [name, setName] = useState<IUser["name"]>("");
          const [password, setPassword] = useState<IUser["password"]>("");
    
    
    please use these syntaxes to fix the error. There are three errors in your code that I found.

FC<Props>
<IUser["name"]>
<IUser["password"]>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search