I am dynamically creating cards based on the number of players registered eg in this example 8 players registered so 4 cards created.sample code // card grid component {cards.map((cardNumber) => { return ( ); })}draw card component // drop down component {label} {Array.isArray(options) ? options.map((item, index) => ( <> {typeof item === "object" ? item.name : item} )) : options && Object.entries(options).map(([key, value]) => ( {typeof value === "object" ? value.name : value} ))} problem explained in the next comment

How to store the sate using react hook form for dynamically created cards?

Unanswered

Rex posted this in #help-forum

RexOP

2023-12-13T13:32:42.000Z

I am dynamically creating cards based on the number of players registered eg in this example 8 players registered so 4 cards created.
sample code

// card grid component
    {cards.map((cardNumber) => {
           return (
            <DrawCard
              handleMatch={handleMatch}
              showDefaultOption={true}
              key={`card-${cardNumber}`}
              id={cardNumber}
              playerOptions={registeredPlayers}
              />
             );
           })}

draw card component

   <form onSubmit={methods.handleSubmit(handleMatch)}>
       <DropDown
          showDefaultOption={showDefaultOption}
          id={`${id}-dropdown1`}
          label="select a player 1"
          options={playerOptions}
       />
       <DropDown
           showDefaultOption
           id={`${id}-dropdown2`}
           label="select a player 2"
           options={playerOptions}
        />
    </form>

// drop down component
        <label
          {...register(id)}
          htmlFor={`dropdown-${label}`}
        >
          <p>{label}</p>
          <select
            name={`dropdown-${label}`}
            onChange={handleSelectChange}
          >
            {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>
        </label>

problem explained in the next comment

3 Replies

RexOP

2023-12-13T13:34:22.000Z

Here is the problem that I am facing
I have a "publish draw" button in the parallel component of the drawgrid component so it's something like this

 
| ---actionbar (button in this component)
|--- drawgrid ---- card component --- dropdown component

Now I want when the publish draw button is clicked then the state (list 4 of matches) to be logged.
but I am unable to do so.
I am using react-hook-form and even after reading the docs I don't understand how to store state for dynamic cards.

RexOP

2023-12-13T13:41:09.000Z

I am ablr to do this in the Drawcard component but that's not what I want

const DrawCard = ()=>{
  const methods = useForm()
  const handleSubmit = ()=>{
    // logs values for this componet only 
    // all draw data can't be pushed to the db on one single button click for all cards 
    cosnole.log(methods.getValues())
  }
  return (
    <div>
      <FormProvider {...methods}>
        <form onSubmit={methods.handleSubmit(handleSubmit)}>
          // register the state in the dropdown component by passing id to dropdown component 
        </form>
      </FormProvider>
    </div>
 )
}

been struggling with for few days any help appreciated