score:1

Accepted answer

are you sure about returning two adjacent MyComponent over there? And I think that you miss the curly braces when getting the props in the son component definition =

({ selectedOption, onClick, customSectionStyle })

score:0

const Son: React.FC<{ selectedOption?: string | '', onClick?: (href: string, section: string) => void | void, customSectionStyle?: string | '' }> = (selectedOption, onClick, customSectionStyle)

Replace with

const Son: React.FC<{ selectedOption?: string, onClick?: (href: string, section: string) => void, customSectionStyle?: string }> = ({ selectedOption, onClick, customSectionStyle })

score:0

Son Will be called with all props that you've to Destructur it or directly read from props

(selectedOption, onClick, customSectionStyle) should be ({selectedOption, onClick, customSectionStyle})

const Son: React.FC<{ selectedOption?: string | '', onClick?: (href: string, section: string) => void | void, customSectionStyle?: string | '' }> = ({selectedOption, onClick, customSectionStyle}) => {
    return(
        <MyComponent onClick={() => {onClick('/','home')}} customStyle={selectedOption === 'rooms' ? customSectionStyle : ''}/>
        <MyComponent onClick={() => {onClick('/','settings')}} customStyle={selectedOption === 'settings' ? customSectionStyle : ''}/>
        //...
    )
}


Related Query

More Query from same tag