The latest articles on DEV Community by A (@jsar382). https://dev.to/jsar382 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1304936%2F2093caf7-27b6-45d0-a0a5-db3c5b1ccf4a.png https://dev.to/jsar382 en A Mon, 26 Feb 2024 21:14:49 +0000 https://dev.to/jsar382/react-designing-an-interactive-modal-39l9 https://dev.to/jsar382/react-designing-an-interactive-modal-39l9 <p><strong>Scenario</strong>: 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?</p> <p><strong>Example</strong>:<br> 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.</p> <ul> <li>These encounters will have interactive elements that determine how the encounter is resolved.</li> <li>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).</li> <li>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.</li> </ul> <p>I've thought of a couple ways to do this but wondering what the "best practice" is:</p> <ul> <li>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.</li> <li><p>Do the same as above, but then create/destroy the Travel component as each one is resolved.</p></li> <li><p>Have a "Travel" component generate the encounters, and then do the same conditional rendering.</p></li> </ul> <p>Any other ideas? </p> react gamedev systemdesign