CODEWITHSUNDEEP
reactjstypescript
Álvaro
Álvaro

Reputation: 2588

TypeScript pass props to children

I am quite new at TypeScript and I am trying to send some props to a children, normally I will do it like this, - Maybe this is not the best way.

app.js

import React form 'react'
import Component from './component'

const App = () => {

  const myfunc1 = () => 'some function 1'
  const myfunc2 = () => 'some function 2'
  const myfunc3 = () => 'some function 3'
  const var1 = 'some variable 1'
  const var2 = 'some variable 2'

  return (
    <Component 
      myfunc1={myfunc1}
      myfunc2={myfunc2}
      myfunc3={myfunc3}
      var1={var1}
      var2={var2}
    />
  )

}

component.js

import React from 'react'

const Component = ({
  myfunc1,
  myfunc2,
  myfunc3,
  var1,
  var2,
}) => (
   <>
    // Use the props on the component
   </>
)

export default Component

But when doing it with TypeScript, it asks for type declarations on all props on Component.

Is there a better simpler way to pass props so I do not have to declare the type on all props?

Upvotes: 0

Views: 758

Answers (1)

Abraham Labkovsky
Abraham Labkovsky

Reputation: 1956

import { FunctionComponent } from 'react';


type Props = {
  // types...
}

const Component: FunctionComponent<Props> = ({
  myfunc1,
  myfunc2,
  myfunc3,
  var1,
  var2,
}) => (
<>
</>
)

Upvotes: 2

Related Questions