Having different props but in same component

Question

I have a component called Tooltip

In the component, we pass "forceOpen: true"

<Tooltip
allowOverflow:false
aria-label:false
children:ƒ () {}
color:"primary"
disableTooltipPointerEvents:true
forceOpen: true
falsehideOnClick:true
position:"top"
shouldShow:true
spacing:9.5
text:'offline'
>
</Tooltip>

But in other place used that component without "forceOpen: true"

<Tooltip
allowOverflow:false
aria-label:false
children:ƒ () {}
color:"primary"
disableTooltipPointerEvents:true
falsehideOnClick:true
position:"top"
shouldShow:true
spacing:9.5
text:'offline'
>
</Tooltip>

I have seen this pattern in a lot of places. That the same component has different props or common props. I don't know what it called. Can anyone explain how this thing actually works

Answer 1

Let's say your source code for the Tooltip looks like this:

const Tooltip = (props) => {
   const forceOpen = props.forceOpen || 'default';
  return {forceOpen!='default' ? <div>Tip</div> : null}
}

you can then set or not the forceOpen but in the cases where you don't the effect will be the default one.

I am not sure there is a specific pattern for this other then the common encapsulation and the default values for properties:)