React Type error on sending props data to component-CodePudding

Hi I've got this error since a long time and I can't figure how to resolved it.

" ERROR in src/App.tsx:10:18 TS2322: Type '{ inputs: IFormInput[]; }' is not assignable to type 'IntrinsicAttributes & IFormInput[]'. Property 'inputs' does not exist on type 'IntrinsicAttributes & IFormInput[]'"

import React from "react";
import BasicForm from "./components/forms/basicForm";
import { BasicFormMock } from "./Mocks/BasicFormMocks";
import { IFormInput } from "./utils/types/IFormInput";

function App() {
  const input: IFormInput[] = BasicFormMock;

  return (
    <div className="app">
      <BasicForm inputs={input}></BasicForm>
    </div>
  );
}

export default App;

import { FormEvent } from "react";
import { IFormInput } from "../../utils/types/IFormInput";
import FormInput from "./elements/formInput";

const BasicForm: React.FC<IFormInput[]> = (inputs) => {
  function submitForm(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
  }

  return (
    <div className="basicForm">
      <form onSubmit={submitForm}>
        {inputs.map((input) => (
          <FormInput {...input}></FormInput>
        ))}
      </form>
    </div>
  );
};
export default BasicForm;

DATA

export const BasicFormMock: IFormInput[] = [
  {
    id: "1",
    name: "test",
    type: "email",
    placeholder: "string",
    errorMessage: "string",
  },
  {
    id: "2",
    name: "test",
    type: "text",
  },
  {
    id: "3",
    name: "test",
    type: "password",
  },
  {
    id: "4",
    name: "test",
    type: "password",
  },
];

export interface IFormInput {
  id: string;
  name: string;
  type: HTMLInputTypeAttribute;
  placeholder?: string;
  errorMessage?: string;
}

thank you for your answers

CodePudding user response：

In App.tsx you're passing inputs to BasicForm, then in the function signature BasicForm: React.FC<IFormInput[]> = (inputs) you're only accepting a single parameter inputs and then trying to map over that. React accepts props as an object, so inputs would be a property of the props object, e.g.

const BasicForm: React.FC<{ inputs: IFormInput[] }> = ({ inputs }) => {