How to store the sate using react hook form for dynamically created cards?
Unanswered
Rex posted this in #help-forum
RexOP
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
draw card component
problem explained in the next comment
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
Here is the problem that I am facing
I have a "publish draw" button in the parallel component of the
Now I want when the
but I am unable to do so.
I am using
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
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