CODEWITHSUNDEEP
reactjstypescript
Dan
Dan

Reputation: 47

How to setup prop type when passing in different props to a re-usable component?

I have a react-typescript question. So I want to pass down different props to a reusable component from 2 different parent components.

import React from 'react'

const ComponentA = () => {
    return (
        <div>
            <ComponentC propA={someprops} propB={someprops} />
        </div>
    )
}

export default ComponentA

import React from 'react'

const ComponentB = () => {
    return (
        <div>
            <ComponentC propC={someprops} propD={someprops} /> // different 
                                                                  props
        </div>
    )
}

export default ComponentB

How do I setup the prop types in componentC to take in those different prop types?

import React from 'react'

const ComponentC = ({props}: // how to annotate type?) => {
    return (
        <div>
            somecode
        </div>
    )
}

export default ComponentC

Thanks!

Upvotes: 1

Views: 59

Answers (1)

Nick
Nick

Reputation: 16576

It sounds like ComponentC can accept two different sets of props. I would probably define each combination and then say the props can be of one combination or the other. For example:

type OptionOneProps = {
  propA: string;
  propB: string;
}

type OptionTwoProps = {
  propC: string;
  propD: string;
}

const ComponentC = (props: OptionOneProps | Option2Props) => {

  ...

}

Upvotes: 2

Related Questions