How to pass function as a prop in react typescript

Question

I am learning typescript with react and I occurred problem. I tried to pass function as a prop from my App component to child component named DataForm.

but I got an error:

Type '(f: any) => any' is not assignable to type '() => void'.
Parameter 'f' implicitly has an 'any' type.

And this is my code

App.tsx

import React from 'react';
import './App.css';
import DataForm from './components/form';

export const Data = {
  name: "",
  country: "",
  age:"",
  adress:""
}

function App() {


  const generateCard = ()=>{
    console.log(" generateCard runned")
  }
  return (
    <>
      <h1>Human Card Generator</h1>
      <DataForm  createCard = { generateCard }/>
    </>
    

  );
}

export default App;

components/form.tsx

import React from 'react'
import { Data } from '../App'
import 'bootstrap';

interface dataFormProps{
    createCard: ()=>void
}

export default function DataForm({ createCard = f => f }: dataFormProps){

    const dataProceed = (e: any) =>{
        Data.name = (document.getElementById('name') as HTMLInputElement).value;
        Data.country = (document.getElementById('country') as HTMLInputElement).value;
        Data.age = (document.getElementById('age') as HTMLInputElement).value;
        Data.adress = (document.getElementById('adress') as HTMLInputElement).value;
        createCard();
    }


    return(
        <form onSubmit = { dataProceed }>
            <input type="text"   id = "name"  />
            <input type="text"  id = "country" />
            <input type="number" id="age" />
            <input type="text" id = "adress"/>
            <button type="submit">stwórz kartę</button>
        </form>
    )
}

dataFormProps explicitly doesn't match your default function--you have to decide on a function signature, regardless of what it is, and make both explicitly-passed and default functions match that signature. — Dave Newton
– Dave Newton, Commented Aug 23, 2021 at 15:23
Well you defined createCard as ()=>void but then you default it to f => f. So the default value for createCard does not match () => void — Ali Baykal
– Ali Baykal, Commented Aug 23, 2021 at 15:26

David · Accepted Answer · 2021-08-23 15:26:31Z

16

The issue isn't when passing the function, it's when destructuring the props and providing a default function:

{ createCard = f => f }: dataFormProps

This code indicates that createCard should be a function which accepts a parameter and returns a value. Which it doesn't:

createCard: ()=>void

Make the default parameter match the signature:

{ createCard = () => {} }: dataFormProps

answered Aug 23, 2021 at 15:26

David

221k42 gold badges245 silver badges337 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Viet · Accepted Answer · 2021-08-23 15:26:03Z

6

default function createCard should has type () => void. So just update like this:

DataForm({ createCard = () => {} }: dataFormProps)

answered Aug 23, 2021 at 15:26

Viet

12.9k2 gold badges18 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to pass function as a prop in react typescript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related