CODEWITHSUNDEEP
reactjstypescript
Kyle
Kyle

Reputation: 229

Spreading props on a component and destructuring inside a components with typescript

I'm wondering what the best way is to use props spreading and destructing in combination with components.

I'm spreading my props like this:

<RepositoryItem {...node} />

And after I'm destructuring my props in the component like this:

interface RepositoriesProps {
  name: string
  url: string
}

const RepositoryItem: React.FC<RepositoriesProps> = ({ name, url }) => {
  return (
    <div className="repository_item">
      {name} {url}
    </div>
  )
}

Of course, doing it like this I get the following error: Type '{}' is missing the following properties from type 'RepositoriesProps': name, url on the first part where I'm calling the component.

How can I fix this? Or is it better to just don't use props spreading?

Any help would be very appreciated!

Upvotes: 0

Views: 237

Answers (1)

nickbullock
nickbullock

Reputation: 6589

You should directly specify type

const RepositoryItem: React.FC<RepositoriesProps> = ({ name, url }: RepositoriesProps) => {

and your node should has type extending RepositoriesProps
node: MyNode where MyNode is interface MyNode extends RepositoriesProps {}
But basically i think you should just define interface for node contains url and name to give typecript some knowledge (not {})

Upvotes: 1

Related Questions