[SOLVED] React Type error on sending props data to component

Issue

This Content is from Stack Overflow. Question asked by lcsaloon

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;

thank you for your answers



Solution

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


This Question was asked in StackOverflow by lcsaloon and Answered by ourmaninamsterdam It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?