I have difficulty passing an array as a prop to a component from the parent in react typescript.

The error I am getting is

Type '{ report:ReportData[]; }' is not assignable to type 'IntrinsicAttributes & ReportData & { children?: ReactNode; }'.
Property 'report' does not exist on type 'IntrinsicAttributes & ReportData & { children?: ReactNode; }'. Did you mean 'Port'?

import ReportComponent from '../Components/Reports/ReportComponent';
import { ReportData } from "../Types/ReportData.types";
const Report = () => {
 const [Report, setReport] = useState<ReportData[]>([]);
 ReportService.GetReport()
      .then((response) => {
        console.log(response.data.data);
        setReport(response.data.data);
        toast.success(response.data.message);
      }).catch((e) => {
        console.log(e);
      });

  return <ReportComponent report={Report}/>;

//ReportComponent

const ReportComponent: React.FC<ReportData> = (props:ReportData) => {
console.log("props",props)
return  <div className="row">
          
        </div>
}

I will appreciate help on fixing this

Thanks

Hello!

I'm taking my first steps into React -and JV- and encounter a problem I can't solve. It looks like one of those that are actually incredibly simple, the answer just in front of my eyes. But, dammit, I can't see it.

With create-react-app I've been messing with the App.js file. I'm trying to define an Array of objects, and then pass those objects to child functions.

App function:

import React from 'react'

const App = () => {
  const parts = [
    {
      name: 'This is part 1',
      exercises: 20
    },
    {
      name: 'Part two it is',
      exercises: 5
    },
    {
      name: 'Threeee',
      exercises: 16
    }
  ]
  console.log(parts)     //output array: (3) [{…}, {…}, {…}]
  console.log(parts[0])      //output object:{name: "This is part 1", exercises: 20}  
  return (
    <div>
      <Content parts={parts} />
    </div>
  )
}

Content function:

const Content = (props) => {
  console.log(props)  //output object!?: {parts: Array(3)}
  console.log(props[0])  //output: undefined
  return (
    <>
    <Part1 props={props[0]} />
    <Part2 props={props[1]} />
    <Part3 props={props[2]} />
    </>
  )
}

part1 function (part2 and part3 are the same as this):

const Part1 = (props2) => {
  console.log(props2)  //output object!?: {props: undefined}
  return (
    <>
    <p>
      {props2.name} {props2.exercises}
    </p>
    </>
  )
}

What I need to accomplish for the exercise is to only pass the array parts in App function like this: <Content parts={parts} />

Then Content function should use the object indexed 0 on the array and pass it to Part1, which should return the <p> code.

I guess there's an error when passing the array to Content. It gets converted to an object and then I cant use the index method. If I try props[0] I get nothing for it is undefined. If I try to console.log(props[0].name) I get the error: TypeError: Cannot read property 'name' of undefined

How can I pass the array to the child functions? I know the structure of the app might not be ideal, but it's exercise 1.4 for the Fullstackopen Course, by the University of Helsinki. I changed the actual content and eliminated some code to avoid trouble.

I will appreciate any help with the code and with the way I presented my problem, I also have to learn how to do that! Thanks!