How to pass a function with parameters in react with typescript

Question

I want to pass a handleClick to the son so I don't have to do it twice. The code is the following:

Mother:

const Mother = () => {
    const [selectedOption, setSelectedOption] = useState<'rooms' | 'questions' | 'notifications'>('rooms')

    const customSectionStyle = 'bg-primary-500 text-white hover:bg-primary-600'

    //handle click
    const handleClick = (href, section) => {
      setSelectedOption(section);
      router.push(href)
    }
    return(
        <>
            <Son onClick={() => handleClick} selectedOption={selectedOption} customSectionStyle={customSectionStyle}/>
        </>
    )
}

Son:

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 : ''}/>
        //...
        </>
    )
}

Basically this sets the background color in case an option is selected or not. MyComponent is a component that takes that props (and/or others) and sets its own content.

This throws the type error _onClick is not a function. I believe I didn't do it properly.. What did I miss, in your opinion?

Elyess Eleuch · Accepted Answer · 2021-04-04 09:53:12Z

1

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 })

answered Apr 4, 2021 at 9:53

Elyess Eleuch

1411 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user3001286 Over a year ago

Oh yea man the code is much bigger so I did a little example.. I missed the fragment! Thanks

user3001286 Over a year ago

Now there is another problem! in the Son component the onClick says Cannot invoke an object which is possibly 'undefined'.ts(2722) and the console throws the following warning: Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. What should I do?

user3001286 Over a year ago

What I mean is that the useState doesn't work

Elyess Eleuch Over a year ago

Try to change the name of the prop that you're passing to Son Component from onClick toa another name "blabbal" for example because I think the source of your problem is that keyword

user3001286 Over a year ago

I changed the name into handleClick but it wasn't working too. I had also to change the handleClick={() => handleClick} into handleClick={handleClick} and now it works the way I wanted. Thank you very much!

Aleksandar Andjelic · Accepted Answer · 2021-04-04 09:52:31Z

1

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 })

answered Apr 4, 2021 at 9:52

Aleksandar Andjelic

112 bronze badges

Comments

Ravikumar · Accepted Answer · 2021-04-04 09:52:56Z

1

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 : ''}/>
        //...
    )
}

answered Apr 4, 2021 at 9:52

Ravikumar

2,20516 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to pass a function with parameters in react with typescript

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related