Question 234724 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How do you pass down the same function through two components in react?

I am trying to pass a function UpdateHero into a component, then from that component pass it into another component.

When the function reaches the last component it is for some reason no longer a function and this error appears:

UpdateHero is not a function

it works fine in the first component that it is passed into, but I cannot figure out how to pass it into the second one properly.

information.js:

import { useHero } from "./hero";
import HeroButtons from './hero-buttons';

export default function HeroesComponent(){
    
    let { hero, UpdateHero } = useHero();
    
    return (
        <div>
            <HeroButtons hero = {hero}  UpdateHero = {UpdateHero}/>
            
        </div>
    )

}

hero-buttons.js:

import HeroDetails from './hero-detail';


export default function HeroButtons({hero, UpdateHero}) {

    return (
        <div>
            <HeroDetails hero = {hero}  UpdateHero = {UpdateHero}/>
        </div>
    )
}

hero-detail.js:

export default function HeroDetails(hero, UpdateHero) { 

    UpdateHero(something)
}

in hero-detail I get the error: UpdateHero is not a function

this is a very cut-down version of the program, the hero appears to work fine when I pass it into hero-detail so I’m thinking its a problem with hero buttons when I’m trying to pass it down

Tags:

4

Answers


  1. 0 
    export default function HeroDetails(hero, UpdateHero) {...}

    should be

    export default function HeroDetails({ hero, UpdateHero }) {...}

    since props is always an object

    Login or Signup to reply.
  2. 0

    you should receive UpdateHero function in your HeroDetails as
    export default function HeroDetails({hero, UpdateHero}) {
    };

    Login or Signup to reply.
  3. 0

    you should write below formate in heo-detail.js

    export default function HeroDetails({hero, UpdateHero}) {….}

    Login or Signup to reply.
  4. 0

    they way the props have been declared inside the hero-detail.js component is wrong i guess, it should be like

    export default function HeroDetails({hero,UpdateHero})

    instead of

    export default function HeroDetails(hero,UpdateHero)

    By the way you declared, it should work if you call the function by using

    hero.updateHero()

    Because the first argument which gets passed down to that component is for props.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search