React - update state on props changed - input element - reactjs

Question

I have already read all the stack-overflow questions related to this problem, also this official react post and the preferred solutions.
It's not recommended to use componentWillReceiveProps anymore!
Before you mark this question as duplicate, please understand my specific question, I didn't see any solution for my specific problem.
What I'm trying to do is very simple:
I have component KInputRange that received the value from props and send the value out (callback) onEnter event (will send the value to server only on enter)
The props.value can randomly change (coming by websocket from the server)
My Question:
Inside my components, the <input> value attribute will get the data from props or from state?
If from props:
How can I update the value internally when the user type input data?
If from state:
How can I update the new value if the props.value has change randomly from the server?
I'm actually need to update my internal state on props change
but how to do it today, if react says that's anti-pattern?
This my code so far:
class KInputRange extends React.Component<any, any> {
constructor(props: any) {
super(props);
}
private onKeyDown(e: any): void {
//If the key is enter call to props.onEnter with the current value
}
private onChange(e: any): void {
//if user change the value- change the internal value
}
public render() {
return (
<input value={?????} type="text" onChange={(e) => this.onChange(e)} onKeyDown={(e) => this.onKeyDown(e)}/>
);
}
}
Usage:
<KInputRange value={this.state.dataFromTheServer} onEnter={(val: number) => this.kInputRangeEnterClicked(val)}/>

Answer 1

You can use a function component as mentioned in the post you linked here.
To update the value internally you can use React's State Hook.
Something like this:
import React, { useState } from 'react';
const KInputRange = (props) => {
const [value, setValue] = useState(props.value);
function onKeyDown(e: any): void {
//If the key is enter call to props.onEnter with the current value
}
function onChange(e: any): void {
setValue(e.target.value);
}
return (
<input value={value} type="text" onChange={(e) => this.onChange(e)} onKeyDown={(e) => this.onKeyDown(e)}/>
);
}

Answer 2

First, as #Atul said, you DO need to use getDerivedStateFromProps.
It's all because you need to control your component value depending on both - props and internal state.
Assuming you using flow this code should help:
// #flow
import * as React from "react";
type Properties = {
remoteValue: string,
onSubmit: (value: string) => void
};
type State = {
remoteValueMemo: string,
internalValue: string
};
class KInputRange extends React.Component<Properties, State> {
static defaultProps = {
remoteValue: "",
onSubmit: () => {}
};
state = {
remoteValueMemo: this.props.remoteValue,
internalValue: this.props.remoteValue
};
static getDerivedStateFromProps(props: Properties, state: State) {
if (state.remoteValueMemo !== props.remoteValue) {
return {
remoteValueMemo: props.remoteValue,
internalValue: props.remoteValue};
}
return null;
}
handleValueChange = (event: SyntheticEvent<HTMLInputElement>) => {
this.setState({internalValue: event.currentTarget.value});
};
handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
if (event.keyCode === 13) {
this.props.onSubmit(this.state.internalValue);
}
};
render(): React.Node {
const {internalValue} = this.state;
return (
<input value={internalValue} onChange={this.handleValueChange} onKeyDown={this.handleKeyDown}/>
);
}
}
export default KInputRange;

Answer 3

The argument passed to useState is not used to update the state on re-render.
You should use the useEffect Hook.
import React, { useEffect, useState } from 'react';
const Test = (props) => {
const [value, setValue] = React.useState({...props.value});
useEffect(() => {
setValue(props.value);
}, [props.value])
//...
}
Similar topic here: React.useState does not reload state from props

Answer 4

You can use useEffect hook of react whenever you need to do something on specific props change in function component
useEffect(() => {
// You can place your logic here to run whenever value changes
},[value]);
[value] is a dependency so that whenever the value changes you useEffect hook calls
Hope above is helpful to you.