How to pass down props to child component for typescript in react app?-CodePudding

I am quite new and am trying to wrap my head around typescript. I am trying to pass down handleSubmit and handleChange props to my child component but it keeps giving me several erorrs.

In my parent component, both handleSubmit and handleChange are showing me similar errors:

Type '(event: ChangeEvent) => void' is not assignable to type '(e: ChangeEvent | undefined) => void'. Types of parameters 'event' and 'e' are incompatible. Type 'ChangeEvent | undefined' is not assignable to type 'ChangeEvent'. Type 'undefined' is not assignable to type 'ChangeEvent'.ts(2322)

import React, { MouseEvent, useState, ChangeEvent } from "react";
import InputForm from "./InputForm";
import { useNavigate } from "react-router-dom";
import axios from "axios";

export default function Form() {
  const [name, setName] = useState("");
  const navigate = useNavigate();

  const handleChange = (event: ChangeEvent<HTMLButtonElement>) => {
    switch (event.target.name) {
      case "country":
        setName(event.target.value);
        break;
      default:
    }
  };

  const handleSubmit = async (event: MouseEvent) => {
    event.preventDefault();

    await axios
      .post(`http://localhost:3000`, {
        name,
      })
  };

  return (
    <div>
        //handleChange and handleSubmit has errors here
        <InputForm name={name} handleChange={handleChange} handleSubmit={handleSubmit}/>
    </div>
  );
};

Here is my child component (Input form) where I am trying to use the handleSubmit and handleChange props. The onSubmit under the input section is showing me the error:

"Type '(e: FormEvent) => void' is not assignable to type 'FormEventHandler'. Types of parameters 'e' and 'event' are incompatible. Type 'FormEvent' is not assignable to type 'FormEvent'.ts(2322) "

interface currUser {
  name: string;
  handleChange: (e: React.ChangeEvent<HTMLInputElement> | undefined) => void;
  handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
}

export default function InputForm({ name, handleChange, handleSubmit }: currUser) {
  return (
    <div>
      <form>
        <label placeholder="name">Name</label>
        <input
          type="text"
          placeholder="Test"
          name="name"
          value={name}
          onChange={handleChange}
          onSubmit={handleSubmit}
        />
      </form>
    </div>
  );
}

How do I fix this? Thank you very much.

CodePudding user response：

First of all, in your parent you are giving wrong element type to handleChange event (e) parameter. Updated version of Parent component:

import React, { MouseEvent, useState, ChangeEvent, FormEvent } from "react";
import InputForm from "./InputForm";
import { useNavigate } from "react-router-dom";
import axios from "axios";

export default function Form() {
  const [name, setName] = useState("");
  const navigate = useNavigate();

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    switch (event.target.name) {
      case "country":
        setName(event.target.value);
        break;
      default:
    }
  };

  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    await axios
      .post(`http://localhost:3000`, {
        name,
      })
  };

  return (
    <div>
        //handleChange and handleSubmit has errors here
        <InputForm name={name} handleChange={handleChange} handleSubmit={handleSubmit}/>
    </div>
  );
};

You should add onSubmit event to form tag not to input. Here is updated version of Child component:

interface currUser {
  name: string;
  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
}

export default function InputForm({ name, handleChange, handleSubmit }: currUser) {
  return (
    <div>
      <form onSubmit={handleSubmit}>
        <label placeholder="name">Name</label>
        <input
          type="text"
          placeholder="Test"
          name="name"
          value={name}
          onChange={handleChange}
        />
      </form>
    </div>
  );
}