Rename render function to children in AccordionItemState

README.md

@@ -234,7 +234,7 @@ We recommend that you copy them into your own app and modify them to suit your n
           <td>Expands this item on first render</td>
       </tr>
       <tr>
-          <td>render</td>
+          <td>children</td>
           <td>Function</td>
           <td>null</td>
           <td>Takes expanded state as argument for conditional rendering</td>

demo/src/index.tsx

@@ -252,7 +252,7 @@ const Example = (): JSX.Element => (
                                 <td>Expands this item on first render</td>
                             </tr>
                             <tr>
-                                <td>render</td>
+                                <td>children</td>
                                 <td>Function</td>
                                 <td>null</td>
                                 <td>
@@ -481,7 +481,7 @@ const Example = (): JSX.Element => (
                                             </td>
                                         </tr>
                                         <tr>
-                                            <td>render</td>
+                                            <td>children</td>
                                             <td>Function</td>
                                             <td>null</td>
                                             <td>
@@ -753,7 +753,7 @@ const Example = (): JSX.Element => (
                                 role="presentation"
                             />
                         </h3>
-                        <AccordionItemState render={renderFn} />
+                        <AccordionItemState children={renderFn} />
                     </div>
                 </AccordionItemHeading>
                 <AccordionItemPanel>
@@ -773,7 +773,7 @@ const Example = (): JSX.Element => (
                                 role="presentation"
                             />
                         </h3>
-                        <AccordionItemState render={renderFn} />
+                        <AccordionItemState children={renderFn} />
                     </div>
                 </AccordionItemHeading>
                 <AccordionItemPanel>

src/AccordionItemState/AccordionItemState.spec.tsx

@@ -46,21 +46,21 @@ describe('AccordionItemState', () => {
         expect(wrapper.find('div[data-enzyme]').length).toEqual(0);
     });
 
-    it('renders correctly with different render prop', () => {
+    it('renders correctly with different children prop', () => {
         const renderProp = (expanded: boolean): React.ReactNode =>
             expanded ? (
                 <div className="expanded" />
             ) : (
                 <div className="collapsed" />
             );
 
-        const wrapper = mountItem(<AccordionItemState render={renderProp} />);
+        const wrapper = mountItem(<AccordionItemState children={renderProp} />);
 
         expect(wrapper.find('div').hasClass('expanded')).toEqual(true);
         expect(wrapper.find('div').hasClass('collapsed')).toEqual(false);
     });
 
-    it('renders correctly with different render prop and expanded set to false', () => {
+    it('renders correctly with different children prop and expanded set to false', () => {
         function mountExpandedFalse(children: React.ReactNode): ReactWrapper {
             const item: Item = {
                 uuid: 0,
@@ -82,7 +82,7 @@ describe('AccordionItemState', () => {
             );
 
         const wrapper = mountExpandedFalse(
-            <AccordionItemState render={renderProp} />,
+            <AccordionItemState children={renderProp} />,
         );
 
         expect(wrapper.find('div').hasClass('expanded')).toEqual(false);

src/AccordionItemState/AccordionItemState.tsx

@@ -2,10 +2,10 @@ import * as React from 'react';
 
 type AccordionItemStateProps = React.HTMLAttributes<HTMLDivElement> & {
     expanded: boolean;
-    render(expanded: boolean): React.ReactNode;
+    children(expanded: boolean): React.ReactNode;
 };
 
 const AccordionItemState = (props: AccordionItemStateProps): JSX.Element => {
-    return <>{props.render(props.expanded)}</>;
+    return <>{props.children(props.expanded)}</>;
 };
 export default AccordionItemState;

src/AccordionItemState/AccordionItemState.wrapper.tsx

@@ -15,7 +15,7 @@ import AccordionItemState from './AccordionItemState';
 
 type AccordionItemStateWrapperProps = React.HTMLAttributes<HTMLDivElement> & {
     expanded?: boolean;
-    render(expanded: boolean): React.ReactNode;
+    children(expanded: boolean): React.ReactNode;
 };
 
 type AccordionItemStateWrapperContext = {
@@ -33,7 +33,7 @@ export default class AccordionItemStateWrapper extends React.Component<
     };
 
     static defaultProps: AccordionItemStateWrapperProps = {
-        render: (expanded: boolean): React.ReactNode => null,
+        children: (expanded: boolean): React.ReactNode => null,
     };
 
     render(): JSX.Element {
@@ -64,10 +64,10 @@ export default class AccordionItemStateWrapper extends React.Component<
         const item = items.filter(
             (stateItem: Item) => stateItem.uuid === uuid,
         )[0];
-        const { render } = this.props;
+        const { children } = this.props;
 
         return item ? (
-            <AccordionItemState expanded={item.expanded} render={render} />
+            <AccordionItemState expanded={item.expanded} children={children} />
         ) : null;
     }
 }