How do I access Framer hook from another component

Question

I've a useState Hook set up in a file carousel.tsx

export function Carousel({ children }) {
    //Set Active State Carousel Item
    const [active, setActive] = React.useState("default")

    //Create Props for Carousel items
    function makeProps(title) {
        return {
            title: title,
            active: active,
            onTap: () => {
                setActive(title)
            },
        }
    }
  .
  .
  .

    return (
        <CarouselItem {...makeProps(child.props.name)} />
        <CarouselItem {...makeProps(child.props.name)} />
        <CarouselItem {...makeProps(child.props.name)} />
    )
}

Now, on my App.tsx I have a Frame, tapping on which I want to reset to the default state.

export function defaultState(): Override {
    return {
        onTap: () => {
            //Reset to default state
        },
    }
}

How do I access the hook state from App.tsx so that I can reset the state?

score 0 · Answer 1 · answered May 15 '20 at 19:51

If you want to use React without any state management library like Redux or Mobx. You have two ways:

move useState to the App.tsx and pass setActive to any child component
similar as first way, but only store data in context, it's useful if you need pass data to deep component

In case with state management you can store active item in Redux store and update it via action from any part of your project. The same way with mobx

How do I access Framer hook from another component

1 Answers1