diff --git a/webapp/src/components/propertyValueElement.tsx b/webapp/src/components/propertyValueElement.tsx
index 2f32e93d3..4a3a84114 100644
--- a/webapp/src/components/propertyValueElement.tsx
+++ b/webapp/src/components/propertyValueElement.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react'
+import React, {useState} from 'react'
 
 import {IPropertyOption, IPropertyTemplate} from '../blocks/board'
 import {Card} from '../blocks/card'
@@ -20,95 +20,81 @@ type Props = {
     emptyDisplayValue: string
 }
 
-type State = {
-    value: string
-}
+const PropertyValueElement = (props:Props): JSX.Element => {
+    const [value, setValue] = useState(props.card.properties[props.propertyTemplate.id])
 
-export default class PropertyValueElement extends React.Component<Props, State> {
-    constructor(props: Props) {
-        super(props)
-        const propertyValue = props.card.properties[props.propertyTemplate.id]
-        this.state = {value: propertyValue}
-    }
-
-    shouldComponentUpdate(): boolean {
-        return true
-    }
-
-    render(): JSX.Element {
-        const {card, propertyTemplate, readOnly, emptyDisplayValue, boardTree} = this.props
-        const propertyValue = card.properties[propertyTemplate.id]
-        const displayValue = OctoUtils.propertyDisplayValue(card, propertyValue, propertyTemplate)
-        const finalDisplayValue = displayValue || emptyDisplayValue
+    const {card, propertyTemplate, readOnly, emptyDisplayValue, boardTree} = props
+    const propertyValue = card.properties[propertyTemplate.id]
+    const displayValue = OctoUtils.propertyDisplayValue(card, propertyValue, propertyTemplate)
+    const finalDisplayValue = displayValue || emptyDisplayValue
 
+    if (propertyTemplate.type === 'select') {
         let propertyColorCssClassName = ''
-        if (propertyValue && propertyTemplate.type === 'select') {
-            const cardPropertyValue = propertyTemplate.options.find((o) => o.id === propertyValue)
-            if (cardPropertyValue) {
-                propertyColorCssClassName = cardPropertyValue.color
-            }
+        const cardPropertyValue = propertyTemplate.options.find((o) => o.id === propertyValue)
+        if (cardPropertyValue) {
+            propertyColorCssClassName = cardPropertyValue.color
         }
 
-        if (propertyTemplate.type === 'select') {
-            let className = 'octo-propertyvalue octo-label'
-            if (!displayValue) {
-                className += ' empty'
-            }
+        let className = 'octo-propertyvalue octo-label'
+        if (!displayValue) {
+            className += ' empty'
+        }
 
-            if (readOnly || !boardTree) {
-                return (
-                    <div
-                        className={`${className} ${propertyColorCssClassName}`}
-                        tabIndex={0}
-                    >
-                        {finalDisplayValue}
-                    </div>
-                )
-            }
+        if (readOnly || !boardTree) {
             return (
-                <ValueSelector
-                    emptyValue={emptyDisplayValue}
-                    options={propertyTemplate.options}
-                    value={propertyTemplate.options.find((p) => p.id === propertyValue)}
-                    onChange={(value) => {
-                        mutator.changePropertyValue(card, propertyTemplate.id, value)
-                    }}
-                    onChangeColor={(option: IPropertyOption, colorId: string): void => {
-                        mutator.changePropertyOptionColor(boardTree.board, propertyTemplate, option, colorId)
-                    }}
-                    onDeleteOption={(option: IPropertyOption): void => {
-                        mutator.deletePropertyOption(boardTree, propertyTemplate, option)
-                    }}
-                    onCreate={
-                        async (value) => {
-                            const option: IPropertyOption = {
-                                id: Utils.createGuid(),
-                                value,
-                                color: 'propColorDefault',
-                            }
-                            await mutator.insertPropertyOption(boardTree, propertyTemplate, option, 'add property option')
-                            mutator.changePropertyValue(card, propertyTemplate.id, option.id)
+                <div
+                    className={`${className} ${propertyColorCssClassName}`}
+                    tabIndex={0}
+                >
+                    {finalDisplayValue}
+                </div>
+            )
+        }
+        return (
+            <ValueSelector
+                emptyValue={emptyDisplayValue}
+                options={propertyTemplate.options}
+                value={propertyTemplate.options.find((p) => p.id === propertyValue)}
+                onChange={(newValue) => {
+                    mutator.changePropertyValue(card, propertyTemplate.id, newValue)
+                }}
+                onChangeColor={(option: IPropertyOption, colorId: string): void => {
+                    mutator.changePropertyOptionColor(boardTree.board, propertyTemplate, option, colorId)
+                }}
+                onDeleteOption={(option: IPropertyOption): void => {
+                    mutator.deletePropertyOption(boardTree, propertyTemplate, option)
+                }}
+                onCreate={
+                    async (newValue) => {
+                        const option: IPropertyOption = {
+                            id: Utils.createGuid(),
+                            value: newValue,
+                            color: 'propColorDefault',
                         }
+                        await mutator.insertPropertyOption(boardTree, propertyTemplate, option, 'add property option')
+                        mutator.changePropertyValue(card, propertyTemplate.id, option.id)
                     }
+                }
+            />
+        )
+    }
+
+    if (propertyTemplate.type === 'text' || propertyTemplate.type === 'number' || propertyTemplate.type === 'email') {
+        if (!readOnly) {
+            return (
+                <Editable
+                    className='octo-propertyvalue'
+                    placeholderText='Empty'
+                    value={value}
+                    onChange={setValue}
+                    onSave={() => mutator.changePropertyValue(card, propertyTemplate.id, value)}
+                    onCancel={() => setValue(propertyValue)}
                 />
             )
         }
-
-        if (propertyTemplate.type === 'text' || propertyTemplate.type === 'number' || propertyTemplate.type === 'email') {
-            if (!readOnly) {
-                return (
-                    <Editable
-                        className='octo-propertyvalue'
-                        placeholderText='Empty'
-                        value={this.state.value}
-                        onChange={(value) => this.setState({value})}
-                        onSave={() => mutator.changePropertyValue(card, propertyTemplate.id, this.state.value)}
-                        onCancel={() => this.setState({value: propertyValue})}
-                    />
-                )
-            }
-            return <div className='octo-propertyvalue'>{displayValue}</div>
-        }
-        return <div className='octo-propertyvalue'>{finalDisplayValue}</div>
+        return <div className='octo-propertyvalue'>{displayValue}</div>
     }
+    return <div className='octo-propertyvalue'>{finalDisplayValue}</div>
 }
+
+export default PropertyValueElement