React Type error on sending props data to component

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;

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

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

React - sending props to component

Sending props to a React component for a Jest unit test

Type for a React component with certain props

How can I collect data by sending the register as props to the child component using React Hook Form?

React & Typescript component props type for `Component`

React + Typescript: Type of React component with no state/no props

React Native type error: this.props.data.map is not a function

How to generically type React component props and extend the generic props type

TypeScript React Functional Component - is missing the following properties from type 'Element': type, props, key error

Typescript React Functional Component With Multiple Props Type

How to pass a generic type in a React component props

react select - how to define component props type

React memo function changes the props type of the component?

Sending event handlers as props into a React component using TypeScript

Type error when passing props to component

React + Typescript object props to component error

TypeScript error in passing props to child component in react

Dynamically select React component and apply data as props

How to print props data in react component?

Sending data from react component to css file

React Sending Props to Children

React: Sending function as props

TypeScript conditional types: Extract component props type from react component

am getting an error props.onSubmitForm is not a function while trying to pass data from child to parent component in react

Sending Props to functional component : TypeScript

TypeScript React SFC children props type error

passing props through Route in react. sending a property from a child of component tree to other component

React Typescript passing props and data type

React Js: Pass props to React Router's Link component Error