Next.js Discord

Discord Forum

defaultValue Prop Not Working as Expected in Radix UI Accordion with Dynamic Children

Unanswered
Miniature Schnauzer posted this in #help-forum
Open in Discord
Miniature SchnauzerOP
Description:
I'm using Radix UI's Accordion component in a Next.js project and encountering an issue where the defaultValue prop doesn't seem to work when the Accordion's children are dynamically generated. Despite setting defaultValue, the accordion items do not open by default as expected.

Code Snippet:
Here's how I've set up my accordion components:

Page code:
<AccordionContextProvider>
  <div className="w-full">
    <TotalIngresosThisMonth />
  </div>
  <ClientSideAccordionManager>
    <AccordionContentWrapper itemId="item-1" title="Administrar ingresos">
      {/* Content for item-1 */}
    </AccordionContentWrapper>
    <AccordionContentWrapper itemId="item-2" title="Administrar fuente de ingresos">
      {/* Content for item-2 */}
    </AccordionContentWrapper>
    {/* Additional sections if needed */}
  </ClientSideAccordionManager>
</AccordionContextProvider>


ClientSideAccordionManager:
export const ClientSideAccordionManager: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const { openItems, setOpenItems } = useAccordionContext();

  const handleValueChange = (value: string[]) => {
    setOpenItems(value);
  };

  return (
    <Accordion
      type="multiple"
      defaultValue={["item-1"]} // Attempted to set item-1 as the default open item
      value={openItems}
      onValueChange={handleValueChange}
    >
      {children}
    </Accordion>
  );
};


Expected Behavior:
I expect the accordion item specified in the defaultValue prop to be open by default when the page loads.

Actual Behavior:
The accordion does not open any items by default, regardless of the defaultValue specified.

Question:
Could the issue be related to how the children prop is used or possibly a misunderstanding of how defaultValue should work with dynamically generated children? Any insights or suggestions on how to resolve this issue would be greatly appreciated.

3 Replies

Original message was deleted
Miniature SchnauzerOP
AccordionContentWrapper:
"use client";
import { AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
import React from 'react';

export const AccordionContentWrapper: React.FC<{
  itemId: string;
  title: string;
  children: React.ReactNode;
}> = ({ itemId, title, children }) => {
  return (
    <AccordionItem value={itemId}>
      <AccordionTrigger>{title}</AccordionTrigger>
      <AccordionContent>{children}</AccordionContent>
    </AccordionItem>
  );
};
English Lop
Hi, i think problem is that using both value and defaultValue, defaultValue will be ignored when using controlled value
Use simple value fallback if openItems not defined or not included what wanted to be in first render