Next.js Discord

Discord Forum

Card Component 2 buttons with actions, is it possible to have 2 forms with onSubmit?

Unanswered
Basset Artésien Normand posted this in #help-forum
Open in Discord
Basset Artésien NormandOP
As said in title. I have a card component which is being passed its props via a parent that is looping over some data.
The card has 2 buttons with similar actions but slightly different props. Can i use server actions to achieve this?

3 Replies

Basset Artésien NormandOP
'use client'
import { CheckIcon, PlusIcon } from '@heroicons/react/20/solid'
import clsx from 'clsx'
import { Button } from '../Button'
import { ImageWithFallback } from '../shared/ImageWithFallback'

export interface CardProps {
  imgSrc: string
  title: string
  year: number | null
  score: number | null
  tmdbId: number
  onSubmit: () => Promise<void>
}

export default function Card(data: CardProps) {
  const { imgSrc, year, title, score, onSubmit } = data
  return (
    <div>
      <div>
          <ImageWithFallback/>
      </div>
      <div>
        <div>
          <div className="flex justify-between">
            {Boolean(score) && <p>{score}</p>}
          </div>
          <div className="flex w-full">
          <form action{() => onSubmit(true)}>
            <Button
              startIcon={<PlusIcon />}
              size="md"
              type="submit"
            >
              Watchlist
            </Button>
          </form>
          <form action{() => onSubmit(false)}>
            <Button
              startIcon={<CheckIcon />}
              size="md"
                 >
              Seen
            </Button>
          </form>
          </div>
        </div>
      </div>
    </form>
  )
}
Basset Artésien NormandOP
const onSubmit =
  (m: RouterInputs['movieRouter']['create']) => async (b: boolean) => {
    'use server'

    await api.movieRouter.create.mutate({ ...m, watched: b })
  }

 <CardsContainer>
        {data.results.map((m) => {
          return (
            <Card
              key={m.id}
              {...mapTmdbToCard(m)}
              onSubmit={onSubmit({ ...mapTmdbToLocal(m) })}
            />
          )
        })}
      </CardsContainer>

Trying something like this but getting the error below
Basset Artésien NormandOP
This seems to work. But i am not sure if this a great solution. Would be nice to get some feedback