Question 72692 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Property 'contactList' does not exist on type 'IntrinsicAttributes'.ts(2322) – Reactjs

I just want to pass contactList which is an array of objects as a prop to ContactList component, but I’m having the error

  Property 'contactList' does not exist on type 'IntrinsicAttributes'.ts(2322)

I’m new to typescript and I’ve been stuck for hours already, please help thank you!

import { useState } from "react";
import ContantList from "./ContantList";


function ContactForm()  {
    
  interface Contact {
    name: string;
    email: string;
  }

  const [contactList, setContactList] = useState<Contact[]>([]);

  function onAddContact(event: React.FormEvent<HTMLFormElement>): void {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    const name = formData.get("name") as string;
    const email = formData.get("email") as string;
    setContactList((prevData) => [...prevData, {name: name, email: email}])
    
    }

  return (
    <form onSubmit={onAddContact}>
      <h1 className="ml-5 mt-10">Contact Registration Form</h1>
      <label className="mb-1 ml-5 mt-5 inline-block" htmlFor="name">
        Name
      </label>
      <input className="ml-5 block" type="text" name="name" id="name" />
      <label className="mb-1 ml-5 mt-5 inline-block" htmlFor="email">
        Email
      </label>
      <input className="ml-5 block" type="email" name="email" id="email" />
      <button type="submit"
        className="mb-1 ml-5 mt-5 border bg-[#ddd] p-2 text-white"
      >
        Add
      </button>
      <section className="mt-5 bg-[#FFFFFF] p-5" id="Contacts">
        CONTACTS
        <ul className="mt-5 list-none p-5">
          <ContantList contactList={contactList}/> //  Property 'contactList' does not exist on type 'IntrinsicAttributes'.ts(2322)
        </ul>
      </section>
    </form>
  );
}

export default ContactForm;
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    After a couple more minutes searching, I finally found the solution from here

    import { FC } from "react";
import { Contact } from "./ContactForm";

// create a new interface for prop types
interface Props{
    props: Contact[];
 }

 const ContactList: FC<Props> = ({props}) => {
    return (
        <>
              {props.map((prop) => (
                <li>
                <div className="inline-block">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-40 h-40">
                        <path fillRule="evenodd" d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" clipRule="evenodd" />
                    </svg>
                </div>
                <div className="ml-5 inline-block align-top">
                    <div className="flex flex-col justify-center h-40">
                        <h3 className="inline-block">{prop.name}</h3>
                        <a href="#0" className="inline-block">{prop.email}</a>
                    </div>
                </div>
            </li>
      ))}

        </>
    );
}

export default ContactList;

  2. 0

    Probably the problem is in your ContactList props, it must have one parameter

    interface Contact {
  name: string;
  age: number;
  ...
}

function ContactList(props: { contactList: Contact[]}) {}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search