I’m not sure if this is correct but I’ve wanted the Remix way of doing selection in my card components. I have two card component and they are clickable. You only need to choose one of them. I’m not sure how can I do it in the Remix way – without using useState and onClick. Is that possible?

Here’s my code below:

export const action = async ({ request }: ActionFunctionArgs) => {
    const formData = await request.formData();

    const { intent, movie, food } = Object.fromEntries(formData);

    if (intent === "movieSelected") {
        console.log(movie);

        return null;
    }

    if (intent === "foodSelected") {
        console.log(food);

        return null;
    }
    
};
  
export default function IndexRoute() {

    return (
        <Form method="post">
            <div className="container my-8 flex justify-center">
                <div className="flex flex-col gap-4 h-full overflow-y-auto w-full xl:w-6/12">
                    <div
                        className="group relative rounded-xl bg-white border border-zinc-200 hover:border-primary shadow-sm p-6 transition-all"
                        role="button"
                    >
                        
                        <div className="flex justify-between">
                            <div className="bg-primary rounded-full p-1 w-6 h-6 flex items-center justify-center">
                                <Check className="h-4 w-4 text-white" />
                            </div>
                        </div>
                        <div className="mt-6 flex flex-col gap-2">
                            <Label className="text-slate-600 text-sm font-medium">Movie</Label>
                            <Input placeholder="What movie you want?" name="movie" />
                        </div>
                        <div className="flex justify-end mt-6">
                            <Button type="submit" name="intent" value="movieSelected">Submit</Button>
                        </div>
                    </div>

                    <div
                        className="group relative rounded-xl bg-white border border-zinc-200 hover:border-primary shadow-sm p-6 transition-all"
                        role="button"
                    >
                        <div className="flex justify-between">
                            <div className="bg-primary rounded-full p-1 w-6 h-6 flex items-center justify-center">
                                <Check className="h-4 w-4 text-white" />
                            </div>
                        </div>
                        <div className="mt-6 flex flex-col gap-2">
                            <Label className="text-slate-600 text-sm font-medium">Food</Label>
                            <Input placeholder="What food you want?" name="food" />
                        </div>
                        <div className="flex justify-end mt-6">
                            <Button type="submit" name="intent" value="foodSelected">Submit</Button>
                        </div>
                    </div>

                </div>
            </div>
        </Form>
    )
}