DEV Community

Cover image for React - designing an interactive modal

Posted on

React - designing an interactive modal

Scenario: I'm creating a game in React. What's the best way to structure the app in a way that I can render a series of interactive modals?

Player taps on a location on a map. As they move to the location, they'll encounter 0 to X other people on the way.

  • These encounters will have interactive elements that determine how the encounter is resolved.
  • Each one of those encounters may influence the ones after it (for example, I might conduct a trade, and subsequent encounters may decide to ignore me after).
  • Let's say there's 3 types of encounters. As I resolve each one, I'll see the next one until I arrive at my destination.

I've thought of a couple ways to do this but wondering what the "best practice" is:

  • Generate a list of potential encounters in a Game component, and pass it to a "Travel" component that conditionally renders text based off which type of encounter.
  • Do the same as above, but then create/destroy the Travel component as each one is resolved.

  • Have a "Travel" component generate the encounters, and then do the same conditional rendering.

Any other ideas?

Top comments (0)