How to correctly render an element whose state is: this.props.state?

Question

JavaScript

I ran into a problem that if you call an element and assign state : this.props.state in it in the constructor, then everything works the first time, and then the values ​​​​change, and the previous ones are displayed for the user.

class UserData extends Component {
    constructor(...args) {
        super(...args);
        this.state = {
            id : this.props.id,
...

//value не меняется для пользователя при следующем вызове
<Input value={this.state.id} onChange={(event)=> this.setState({ id: event.target.value })} type="text"/>

//Это реализация (если нужна), но мне кажется, что проблема в коде выше
//кнопка которая рендерит элемент
<UserRow setUserData={()=>that.setUserData( user.id )} row_id={user.id } />
//функция
setUserData(id ){ this.setState({ user_data: <UserData id={id} /> });}

Answer 1

You need to listen to componentWillReceiveProps :

componentWillReceiveProps(nextProps) {
  this.setState({ id: nextProps.id })
}

Plus read how not to use state: https://facebook.github.io/react/tips/props-in-get...

Answer 2

Set the initial state to ComponentWIllMount, or check

if(!this.state.id) this.setState({id: this.props.id})