]> Untitled Git - lemmy.git/blobdiff - ui/src/components/data-type-select.tsx
routes.api: fix get_captcha endpoint (#1135)
[lemmy.git] / ui / src / components / data-type-select.tsx
index f2539c8103ad17331cabc27b3214d9015737d39c..c3e1fc60573d8b3c697542ccc6899940cc9839d0 100644 (file)
@@ -25,11 +25,17 @@ export class DataTypeSelect extends Component<
     this.state = this.emptyState;
   }
 
+  static getDerivedStateFromProps(props: any): DataTypeSelectProps {
+    return {
+      type_: props.type_,
+    };
+  }
+
   render() {
     return (
-      <div class="btn-group btn-group-toggle">
+      <div class="btn-group btn-group-toggle flex-wrap mb-2">
         <label
-          className={`pointer btn btn-sm btn-secondary 
+          className={`pointer btn btn-outline-secondary 
             ${this.state.type_ == DataType.Post && 'active'}
           `}
         >
@@ -42,8 +48,9 @@ export class DataTypeSelect extends Component<
           {i18n.t('posts')}
         </label>
         <label
-          className={`pointer btn btn-sm btn-secondary ${this.state.type_ ==
-            DataType.Comment && 'active'}`}
+          className={`pointer btn btn-outline-secondary ${
+            this.state.type_ == DataType.Comment && 'active'
+          }`}
         >
           <input
             type="radio"
@@ -58,8 +65,6 @@ export class DataTypeSelect extends Component<
   }
 
   handleTypeChange(i: DataTypeSelect, event: any) {
-    i.state.type_ = Number(event.target.value);
-    i.setState(i.state);
-    i.props.onChange(i.state.type_);
+    i.props.onChange(Number(event.target.value));
   }
 }