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

Reactjs – React Typescript crazy

Can someone please explain why this isn’t working?

I have a simple react component.

interface iRowData{
   name: string
}

export default function ResultsSection(data: iRowData[]) {
   return <div>Results</div>
}

I get an error when I use this in another component.

export default function NewPage(){
   const rowData:iRowData[] = []
   return <ResultsSection data={rowData} />
}

The word data is highlighted red, and this is the error I keep getting.

Type '{ data: iRowData[]; }' is not assignable to type 'IntrinsicAttributes & iRowData[]'.
  Property 'data' does not exist on type 'IntrinsicAttributes & iRowData[]'.ts(2322)
(property) data: iRowData[]
Tags:

2

Answers


  1. 0

    You need to pass props in as an object:

    export default function ResultsSection({ data }: { data: iResults[] }) {
  return <div>Results</div>;
}

export default function NewPage() {
  const rowData: iRowData[] = [];
  return <ResultsSection data={rowData} />;
}

    Notice that ResultsSection now takes an object with property data: iResults[], rather than taking a single parameter of that type.

    I also notice that you’re using two different types; iRowData and iResults. Is this intentional? Is there any overlap between these two types? If they are completely different, you’ll still get a different error.

    Login or Signup to reply.
  2. 0

    I think you need to unpack the incoming parameters, e.g.

    interface iResults {
   name: string;
}

interface ResultSectionProps {
   data: iResults[];
}

export default function ResultsSection({ data }: ResultSectionProps) {
   return <div>Results</div>
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search