From b74c0997738f0b9f11caa57e7e52cd2f40bcc886 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Thu, 6 Dec 2018 14:54:26 +0100
Subject: [PATCH] use render props instead of cloneElement

---
 .../ToggleButtonGroup/ToggleButtonGroup.tsx   | 14 +++--------
 public/app/features/explore/Logs.tsx          | 25 +++++++++++++------
 2 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx b/public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx
index 91b7f1538c9..1e9ae4732df 100644
--- a/public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx
+++ b/public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx
@@ -4,6 +4,7 @@ interface ToggleButtonGroupProps {
   onChange: (value) => void;
   value?: any;
   label?: string;
+  render: (props) => void;
 }
 
 export default class ToggleButtonGroup extends PureComponent<ToggleButtonGroupProps> {
@@ -26,25 +27,16 @@ export default class ToggleButtonGroup extends PureComponent<ToggleButtonGroupPr
   }
 
   render() {
-    const { children, value, label } = this.props;
+    const { value, label } = this.props;
     const values = this.getValues();
     const selectedValue = value || values[0];
     const labelClassName = `gf-form-label ${this.smallChildren() ? 'small' : ''}`;
 
-    const childClones = React.Children.map(children, (child: ReactElement<any>) => {
-      const { value: buttonValue } = child.props;
-
-      return React.cloneElement(child, {
-        selected: buttonValue === selectedValue,
-        onChange: this.handleToggle.bind(this),
-      });
-    });
-
     return (
       <div className="gf-form">
         <div className="toggle-button-group">
           {label && <label className={labelClassName}>{label}</label>}
-          {childClones}
+          {this.props.render({ selectedValue, onChange: this.handleToggle.bind(this) })}
         </div>
       </div>
     );
diff --git a/public/app/features/explore/Logs.tsx b/public/app/features/explore/Logs.tsx
index f7704cf340a..cc4dcbdcc5c 100644
--- a/public/app/features/explore/Logs.tsx
+++ b/public/app/features/explore/Logs.tsx
@@ -305,13 +305,24 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
             <Switch label="Timestamp" checked={showUtc} onChange={this.onChangeUtc} small />
             <Switch label="Local time" checked={showLocalTime} onChange={this.onChangeLocalTime} small />
             <Switch label="Labels" checked={showLabels} onChange={this.onChangeLabels} small />
-            <ToggleButtonGroup label="Dedup" onChange={this.onChangeDedup} value={dedup}>
-              {Object.keys(LogsDedupStrategy).map((dedupType, i) => (
-                <ToggleButton className="btn-small" key={i} value={dedupType}>
-                  {dedupType}
-                </ToggleButton>
-              ))}
-            </ToggleButtonGroup>
+            <ToggleButtonGroup
+              label="Dedup"
+              onChange={this.onChangeDedup}
+              value={dedup}
+              render={({ selectedValue, onChange }) =>
+                Object.keys(LogsDedupStrategy).map((dedupType, i) => (
+                  <ToggleButton
+                    className="btn-small"
+                    key={i}
+                    value={dedupType}
+                    onChange={onChange}
+                    selected={selectedValue === dedupType}
+                  >
+                    {dedupType}
+                  </ToggleButton>
+                ))
+              }
+            />
             {hasData &&
               meta && (
                 <div className="logs-meta">