There is an error I get

TypeError: inputValues.map is not a function

In <InputGroup/>, it shows warning

Type '{ inputValues: InputValueType[]; }' is not assignable to type 'IntrinsicAttributes & InputValueType[]'.
  Property 'inputValues' does not exist on type 'IntrinsicAttributes & InputValueType[]'.ts

How to fix it?

App.tsx

import React, { useState, useEffect, useRef, ChangeEvent } from "react";

import type { NextPage } from "next";

type InputValueType = {
  id: number;
  value: string;
};

const InputGroup = (inputValues: Array<InputValueType>): JSX.Element => {
  var rows: Array<any> = [];
  inputValues.map((inputValue: InputValueType) => {
    console.log(inputValues);
  });
  return <>{rows}</>;
};

const Home: NextPage = () => {
  const [inputValues, setInputValues] = useState<Array<InputValueType>>([
    { id: 0, value: "" },
    { id: 1, value: "" },
    { id: 2, value: "" },
    { id: 3, value: "" },
    { id: 4, value: "" }
  ]);

  return (
    <div className="container">
      <InputGroup inputValues={inputValues} />
    </div>
  );
};

export default Home;

Codesandbox
https://codesandbox.io/s/react-typescript-forked-077l4z?file=/src/App.tsx:0-761

CodePudding user response：

You needed to destruct the 'props' parameter of the 'InputGroup' component to use the 'inputValues' property.

type InputGroupProps = {
  inputValues: Array<InputValueType>
}

const InputGroup = ({ inputValues }: InputGroupProps): JSX.Element => {
  var rows: Array<any> = [];
  inputValues.map((inputValue: InputValueType) => {
    console.log(inputValue);
  });
  return <>{rows}</>;
};

Anything passed as an attribute in the '' tag will end up inside props (https://reactjs.org/docs/components-and-props.html)

CodePudding user response：

You are considering the single attribute inputValues to be the whole prop object. In reality it is just one on of the keys of the prop object being passed.

Usually one defines an interface for props and adds custom keys inside it to pass them down to child components.

import React, { useState, useEffect, useRef, ChangeEvent } from "react";

import type { NextPage } from "next";

type InputValueType = {
  id: number;
  value: string;
};

interface InputGroupProps {
  inputValues: Array<InputValueType>;
}
const InputGroup = ({ inputValues }: InputGroupProps): JSX.Element => {
  var rows: Array<any> = [];
  inputValues.map((inputValue: InputValueType) => {
    console.log(inputValue);
  });
  return <>{rows}</>;
};

const Home: NextPage = () => {
  const [inputValues, setInputValues] = useState<InputValueType[]>([
    { id: 0, value: "" },
    { id: 1, value: "" },
    { id: 2, value: "" },
    { id: 3, value: "" },
    { id: 4, value: "" }
  ]);

  return (
    <div className="container">
      <InputGroup inputValues={inputValues} />
    </div>
  );
};

export default Home;

Above I have extracted the inputValues key out of the props object using destructuring

Playground Link

Another simple way it can be achieved is wihout using an interface and directly using the props object, which is what I feel you were going for. Here again destructuring will be used.

import React, { useState, useEffect, useRef, ChangeEvent } from "react";

import type { NextPage } from "next";

type InputValueType = {
  id: number;
  value: string;
};

const InputGroup = ({
  inputValues
}: {
  inputValues: Array<InputValueType>;
}): JSX.Element => {
  var rows: Array<any> = [];
  inputValues.map((inputValue: InputValueType) => {
    console.log(inputValue);
  });
  return <>{rows}</>;
};

const Home: NextPage = () => {
  const [inputValues, setInputValues] = useState<Array<InputValueType>>([
    { id: 0, value: "" },
    { id: 1, value: "" },
    { id: 2, value: "" },
    { id: 3, value: "" },
    { id: 4, value: "" }
  ]);

  return (
    <div className="container">
      <InputGroup inputValues={inputValues} />
    </div>
  );
};

export default Home;

Playground Link

CodePudding user response：

You have to pass ({inputValues}: {inputValues: Array}) as the props for you're InputGroup component.

  const InputGroup = ({inputValues}: {inputValues: Array<InputValueType>}):JSX.Element => {

  var rows: Array<any> = [];
  inputValues.map((inputValue: InputValueType) => {
     console.log(inputValue);
  });

  return <>{rows}</>;
};