Profile with static and input modes (View and Update) I'm a solo developer and a friend told me that my code is not very readable. I always write code trying to keep it DRY while not taking longer than it would take doing it in an &quot;easier&quot; way.
Here is the skeleton for My Profile feature which will initially have read-only values. When the user wants to update it, it turns into an input when clicking on edit.
Is there anything wrong with this way of going about it?
class MyProfileEdit extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            data: {},
            onEdit: &quot;&quot;
        }
        this.displayKey = {
            &quot;first_name&quot;: &quot;First name&quot;,
            &quot;last_name&quot;: &quot;Last name&quot;,
            &quot;zipCode&quot;: &quot;Zip&quot;
        }
    }
    handleOnChange = key =&gt; e =&gt; e.persist() || this.setState(prevState =&gt; {
        prevState.data[key] = e.target.value;
        return prevState;
    })
    getInputValue = key =&gt; this.state.data[key] || this.props.currentUser[key]
    getKeyDisplay = key =&gt; this.displayKey[key] || key[0].toUpperCase() + key.slice(1)
    getStatic = key =&gt; (
        &lt;label style={{display: &quot;flex&quot;}}&gt;
            {this.getKeyDisplay(key)}: {this.getInputValue(key)}  &amp;nbsp;&amp;nbsp;&amp;nbsp;
            &lt;div onClick={() =&gt; this.setState({onEdit: key})}&gt;Edit&lt;/div&gt;
        &lt;/label&gt;
    )
    getInput = key =&gt; (
        &lt;label style={{ display: &quot;flex&quot; }}&gt;
            {this.getKeyDisplay(key)}:
            &lt;input value={this.getInputValue(key)} onChange={this.handleOnChange(key)} /&gt; 
            &lt;div onClick={() =&gt; this.setState({ onEdit: &quot;&quot; })}&gt;Done&lt;/div&gt;

        &lt;/label&gt;
    )
    getStaticOrInput = key =&gt; this.state.onEdit != key ? this.getStatic(key) : this.getInput(key);
    render(){
        return (
            &lt;React.Fragment&gt;
                My profile:&lt;br /&gt;&lt;br /&gt;
                { this.getStaticOrInput(&quot;first_name&quot;) }
                { this.getStaticOrInput(&quot;last_name&quot;) }
                &lt;label&gt;
                    Notification option:
                    &lt;select 
                        value={this.getInputValue(&quot;notification_option&quot;)} 
                        onChange={this.handleOnChange(&quot;notification_option&quot;)}
                    &gt;
                        &lt;option value=&quot;SMS&quot;&gt;SMS&lt;/option&gt;
                        &lt;option value=&quot;EMAIL&quot;&gt;Email&lt;/option&gt;
                    &lt;/select&gt;
                &lt;/label&gt;
                { this.getStaticOrInput(&quot;city&quot;) }
                { this.getStaticOrInput(&quot;address&quot;) }
                { this.getStaticOrInput(&quot;zipCode&quot;) }
            &lt;/React.Fragment&gt;
        )
    }
}
Other than your handleOnChange handler is mutating state, this code seems understandable and readable enough to me, only minor comments about code style.
React-ness
React's synthetic events' persist function is a void return, so I don't think the logical OR between it and the state update necessary.
Mutating-state handler with odd event persisting.
handleOnChange = key =&gt; e =&gt; e.persist() || this.setState(prevState =&gt; {
  prevState.data[key] = e.target.value; // &lt;-- this mutates existing state
  return prevState; // &lt;-- saving previous state object back in state
})

Non-mutating-state handler. React class-based component state updates are merged in, but nested state needs to have their previous state merged manually. Also, instead of persisting the event for use in the &quot;asynchronous&quot; setState, it is more common to grab the event value and let react do what it needs with the event object (i.e. return back to pool).
handleOnChange = key =&gt; e =&gt; {
  const { value } = e.target;
  this.setState(prevState =&gt; ({
    data: {
      ...prevState.data,
      [key]: value,
    },
  }));
}

Readability
All other comments I'd have on the code are more about the readability, i.e. appropriate usage of whitespace, 2-space vs 4-space tabs, etc.. but these are largely dev team driven and tend to be subject to opinion.
Common practices though are

Single line space between code blocks (functions and any other logical &quot;chunk&quot; of code
Using curly brackets for functions that are more than simply an implicit return, i.e. they have more than a single expression
Using appropriate line breaks when lines of code get too long, usually around 80 chars

Maintainability/Reusability
The one remaining comment I'd have would be to try and abstract the this.getStaticOrInput logic and utilities into a separate react component, something like EditableInput that handles its toggling state internally.
&lt;EditableInput name=&quot;first_name&quot; value={...} etc.. /&gt;
&lt;EditableInput name=&quot;last_name&quot; value={...} etc.. /&gt;
...