Keeping track of dynamic card data

Unanswered

Rex posted this in #help-forum

RexOP

2023-12-22T07:53:07.000Z

Need some guidance
I am working an a page in which cards are dynamically generated and each cards has two dropdowns. Each card is passed list of players which then are passed to each drop down. Since the are cards are being created dynamically keeping track of state using unique id the dynamically generated dropdowns is very hard.
Is their a easy way of generating unique id for these cards/dropdown because based on these "ids" the state is registered in useform hook which then will be stored in db

right now my state looks something like this

{
    "match-1-dropdown1": "Foo",
    "match-1-dropdown2": "bar",
    "match-2-dropdown1": "buz",
    "match-2-dropdown2": "doe"
}

this doesn't look very clean. I wounder how in accounting software state is maintained in which there are many columns, rows, input field that can be dynamically added/removed

Sampel code

  <div>
    <FormProvider {...methods}>
      {playerPairs?.map((pair, index) => {
        return (
          <DrawCard
           showDefaultOption={false}
           key={index}
           id={index}
           playerOptions={pair}
          />
        )
      })}
    </FormProvider>
   </div>

2 Replies

RexOP

2023-12-22T07:54:01.000Z

Card Component

       <div className="flex flex-col gap-3 basis-2/3 grow">
         <p className="text-grey fw700 underline">Set Date & Time</p>
         <DropDown
           showDefaultOption={showDefaultOption}
           id={`match-${id}-dropdown1`}
           label="select a player 1"
           options={playerOptions}
          />

         <DropDown
            showDefaultOption={showDefaultOption}
            id={`match-${id}-dropdown2`}
            label="select a player 2"
            options={playerOptions}
           />
        </div>

        <label
          {...register(id)}
          htmlFor={`dropdown-${label}`}
        >
          <p
            className={`${
              size == "small" ? "f13" : "rounded-lg fw700 f12 pt-[10px] "
            } text-[#828282] pl-[15px] sm:pl-[20px]  `}
          >
            {label}
          </p>
          <select
            name={`dropdown-${label}`}
            onChange={handleSelectChange}
          >
            {showDefaultOption && <option key="default" value=""></option>}
            {Array.isArray(options)
              ? options.map((item, index) => (
                  <option
                    key={index}
                    value={typeof item === "object" ? item.name : item}
                  >
                    {typeof item === "object" ? item.name : item}
                  </option>
                ))
              : options &&
                Object.entries(options).map(([key, value]) => (
                  <option key={key} value={key}>
                    {typeof value === "object" ? value.name : value}
                  </option>
                ))}
          </select>

          <div className="absolute sm:top-5 top-5 right-3 sm:right-6">
            <Image
              src="/dropdown.svg"
              width={24}
              height={24}
              alt="dropdown age"
            />
          </div>
        </label>