React Type error on sending props data to component

Question

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

ourmaninamsterdam · Accepted Answer · 2022-09-18T15:50:53.957

0

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 }) => {

edited Sep 18 '22 at 15:50

answered Sep 18 '22 at 15:23

ourmaninamsterdam

1,915
15
11

I did it but how can I resolved it not the property Property 'inputs' does not exist on type 'IFormInput[]' – lcsaloon Sep 18 '22 at 15:43
Could you also post the `IFormInput` type in your question. Given you're referencing `IFormInput` as an array type `IFormInput[]` it won't contain a property `inputs`. – ourmaninamsterdam Sep 18 '22 at 15:45
Your function signature should perhaps look like this? `const BasicForm: React.FC<{ inputs: IFormInput[]}> = ({ inputs })`. – ourmaninamsterdam Sep 18 '22 at 15:50
yes of course I post the data and the interface – lcsaloon Sep 18 '22 at 15:51
1

It worked thank you very mutch for your help – lcsaloon Sep 18 '22 at 15:53
Great. Welcome to Stack Overflow BTW. I've just updated the answer with the correct code if you'd like to accept that as the answer. – ourmaninamsterdam Sep 18 '22 at 15:55
Further to my answer, you could simplify the interface even further: `const BasicForm = ({ inputs }: { inputs: IFormInput[] }>)`. TypeScript will be able to infer that you're typing a React Functional Component without needing to put `React.FC`. – ourmaninamsterdam Sep 18 '22 at 16:09

React Type error on sending props data to component

1 Answers1