setInputText is not Assignable to type 'Intrinsicattributes & { Children?: Reactnode; }'

Question

I have this variable that returns an error:

Type '{ setInputText: Dispatch<Setstateaction>; }' is not Assignable to type 'Intrinsicattributes & { Children?: Reactnode; }'. Property 'setInputText' does not exist on type 'Intrinsicattributes & { Children?: Reactnode; }

Here is my code:

import React, { useState } from 'react';
import './App.css';
import Form from './components/Form';

const Props = {
  setInputText: function
}

function App(){
  const [todo, setTodo] = useState([]);
  const [inputText, setInputText] = useState("");

  return (
    <main>
      <div>
        <div className="title">
          <h1><span suppressContentEditableWarning={true} contentEditable="true">Your name</span> todo list</h1>
        </div>
        <>
        <Form ***setInputText***={setInputText}/>
        </>
      </div>
    </main>
  );
}

export default App;

import React from 'react';
import { BsPlusSquareFill } from 'react-icons/bs';

const Form: React.FC = ({ setInputText }: any) => {
  const getInputText = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputText(e.target.value);
  }
  const submitTodoHandler = (e: any) => {
    e.preventDefault();
    console.log("hi")
  }
  return(
    <form>
      <div className="row">
        <div className="inputTodo">
          <input type="text" placeholder="Write here your todo" onChange={getInputText}/>
          < BsPlusSquareFill className="plus-sign" onClick={submitTodoHandler}/>
        </div>
        <select name="todos" id="todos">
          <option value="all">All</option>
          <option value="completed">Completed</option>
          <option value="Uncompleted">Uncompleted</option>
        </select>
      </div>
    </form>
  )
}

export default Form;

How do I solve this problem?

Answer 1

In its component Form you need to type your props, as you are using the React.FC you can pass your props types by Generic that way:

import React from 'react';
import { BsPlusSquareFill } from 'react-icons/bs';

type IFormProps = {
  setInputText: (value: string) => void
}

const Form: React.FC<IFormProps> = ({ setInputText }) => { ... }

If you are not using the React.FC could do that way too:

const Form = ({ setInputText }: IFormProps) => { ... }