【React&Typescript】エラーの解消とその詳細のご教授のお願い

Question

前提・実現したいこと

ReactとTypeScriptでTodoアプリを開発しています。
ただ、下記のエラーが出ており、自分でも色々と調べてみたのですが、エラーの内容を未だ理解していない状況です。

どなたか①エラーの内容②解決方法についてご教授いただけないでしょうか？

Type '{ task: TaskProps[]; }' is not assignable to type 'IntrinsicAttributes & TaskProps[] & { children?: ReactNode; }'.

Property 'task' does not exist on type 'IntrinsicAttributes & TaskProps[] & { children?: ReactNode; }'.

コードとしては、下記の手順です。
①親コンポーネント（App.tsx）から子コンポーネント（Task2.tsx）に、オブジェクトの配列を渡す
②子コンポーネントでmapを回し、入力されたタスクの一覧を表示

●親コンポーネント（App.tsx）

import React, { useState } from "react"
import { Tasks, InputTask, NowTasks } from "./components/entrypoint"
import styled from "styled-components"

type TaskProps = {
  taskname: string
  doneJudge: boolean
}

const Wrapper = styled.div`
  padding: 30px 0 30px 40px;
`

const App: React.VFC = () => {
  const [taskP, setTaskP] = useState([""])
  const [T, setT] = useState("")
  const [Ts, setTs] = useState<TaskProps[]>([])
  const [Tinfo1, setTinfo1] = useState("")
  const [Tinfo2, setTinfo2] = useState(false)

  const GetTask = (Task: string) => {
    console.log(Task)
    const TaskDone: boolean = false
    const TaskInfo: TaskProps = {
      taskname: Task,
      doneJudge: Tinfo2,
    }
    setTs([...Ts, TaskInfo])
    console.log(Ts)
  }

  return (
    <Wrapper>
      <Tasks task={Ts} />
    </Wrapper>
  )
}

export default App

●子コンポーネント（Task2．tsx）

import React from "react"
import styled from "styled-components"

const Container = styled.div`
  padding: 0;
  width: 25%;
  min-width: 200px;
  height: 30px;
`
const Select = styled.select`
  width: 100%;
  height: auto;
  font-size: 1.5rem;
  @media screen and (max-width: 500px) {
    background-color: red;
  } ;
`

type TaskProps = {
  taskname: string
  doneJudge: boolean
}

const Tasks: React.FC<TaskProps[]> = (props) => {
  return (
    <Container>
      <Select name="" id="">
        <option value="">選択してください</option>
        {props.map((T: TaskProps, index) => {
          return <option key={index.toString()}>{T.taskname}</option>
        })}
      </Select>
    </Container>
  )
}

export default Tasks

Answer 1

React.FC<TaskProps[]>というような形の宣言は適切ではありません。

props自体を配列にすることはできませんので、（渡す側と比較すれば）propsの型は{tasks: TaskProps[]}が妥当かと思います。

Comments

[inagaigai]

お早い回答ありがとうございます！

ご指摘いただいか箇所を編集しました。

ただ、依然としてエラー文が消えない状況です↓
Type '{ task: TaskProps[]; }' is not assignable to type 'IntrinsicAttributes & TaskProps[]'.
Property 'task' does not exist on type 'IntrinsicAttributes & TaskProps[]'.

[maisumakun]

React.FC<TaskProps[]>はどのように書き換えましたか？

[inagaigai]

子コンポーネント内ご指摘箇所は下記のように書き換えました。

const Tasks = (task: TaskProps[]) => {
return (
<Container>
<Select name="" id="">
<option value="">選択してください</option>
{props.map((T: TaskProps, index: number) => {
return <option key={index.toString()}>{T.taskname}</option>
})}
</Select>
</Container>
)
}

[maisumakun]

propsという名前を変えただけでは、「props自体を配列にすることはできません」という問題は解決しないです。

[inagaigai]

解決しました！

子コンポーネント内の型定義をご指摘いただいた下記の形で編集したところ、エラーが消えました！
本当にありがとうございます！
type Task = {
task: TaskProps[]
}

ちなみに一点伺いたいのですが、当初私が行っていたprops: Task[]といった直接propsを配列で定義したことが原因だったのでしょうか？？

[maisumakun]

> 当初私が行っていたprops: Task[]といった直接propsを配列で定義したことが原因だったのでしょうか？？

そのとおりです。

[inagaigai]

本当にありがとうございました！

また一つ前に進めました！