React with typescript passing function as props using hooks

Question

I am pretty new to typescript. trying to build a simple crud app with react, typescript and hooks. I can't figure out how to pass data and function together as props to a child component that will further send props to his chid. Here is a sample code.

parent component

const App = () => {
  const [data, setData] = useState([
    { id: 1, name: 'John', email: '[email protected]' },
    { id: 1, name: 'Mike', email: '[email protected]' },
  ])

 // how to send this function to StudentList component
  const removeStudent = (id: number): void => {
    setData(data.filter(item => item.id !== id))
  }

  return (
    <div>
      <StudentList data={data} removeStudent={removeStudent} />
    </div>
  );
}

child component / StudentList

interface StudentsInterface {
    id: number,
    name: string,
    email: string,
}

interface PropsFunction {
    removeStudent: () => void
}

const StudentList = ({ data }: { data: StudentsInterface[] }, { removeStudent }: PropsFunction) => {
    console.log('removeStudent ==>', removeStudent) // getting undefined
    return (
        <table id='students'>
            <tbody>
                {data.map((student, index) => {
                    return (
                        <Student student={student} key={index} removeStudent={removeStudent} />
                    )
                })}
            </tbody>
        </table>
    )
}

If I just pass data (first parameter of StudentList), I get the props, but I want removeStudent function too...

If it is just react I know I would just destructure {removeStudent} in studentList and I am done, but here in typescript I have to define data type...

Hope I am clear. Since I am pretty new to typescript I would be glad if you explain what I am doing wrong.

I don't know about typescript, but in javascript you'd do const StudentList = ({ data, removeStudent } => , and I suspect the typescript version expectrs something similar — TKoL
– TKoL, Commented Jan 16, 2020 at 18:03
perhaps const StudentList = ({ data: StudentsInterface[], removeStudent: PropsFunction } => — TKoL
– TKoL, Commented Jan 16, 2020 at 18:04

Adam Jenkins · Accepted Answer · 2020-01-16 18:12:32Z

2

You're using 2 arguments as props:


const StudentList = ({ data, removeStudent }: { data: StudentsInterface[], removeStudent: PropsFunction }) => ...

EDIT:

One way to fix it is that you have defined PropsFunction as an interface, meaning it is an object with a property removeStudent - you probably just want it to be:

type PropsFunction = () => void;

edited Jan 16, 2020 at 18:12

answered Jan 16, 2020 at 18:04

Adam Jenkins

56.3k13 gold badges85 silver badges113 bronze badges

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

4 Comments

user9258981 Over a year ago

Ok I have got my function as props but still I am getting error "Property 'removeStudent' is missing in type '(id: number) => void' but required in type 'PropsFunction"

user9258981 Over a year ago

now this new error "Type '(id: number) => void' is not assignable to type 'PropsFunction'. "

Adam Jenkins Over a year ago

@user9258981 - of course not, but that's typescript. - one type takes an argument (id: number) and the PropsFunction I posted doesn't, so fix it.

user9258981 Over a year ago

I passed a parameter in propsFunction, so now it fixed...thanks

Collectives™ on Stack Overflow

React with typescript passing function as props using hooks

parent component

child component / StudentList

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

parent component

child component / StudentList

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related