Initializing an input field with props value in react

Question

I've got a child component that has a text input field whose value should be initialized with props from parent component (this.props.index).

This should be controlled input, since I want to be able to store the text of the input.

Now, if I set the value to the state's attribute, whenever the component gets re-rendered, it's never updated, since setState is never called:

<input type={"text"} placeholder={"Index"} className={"form-control"}
                       value={this.state.index} onChange={this.updateStudentIndex}/>

On the other hand, if I set the value to the prop's attribute, it's fixed and changes cannot be made:

<input type={"text"} placeholder={"Index"} className={"form-control"}
                       value={this.props.index} onChange={this.updateStudentIndex}/>

How can I both initialize the state with this.props.index, and still be able to track changes in the input's value this.state.index?

Edit: Initialization should be done in async mode, i.e. when I click a button from the parent component.

Colin Burke · Accepted Answer · 2018-11-05 18:21:40Z

3

I think default values might be helpful here.

answered Nov 5, 2018 at 18:21

Colin Burke

17.3k13 gold badges57 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zafir Stojanovski Over a year ago

Nope, this does not help. I got the following error:

EditStudentDetails contains an input of type text with both value and defaultValue props. Input elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both).

oma · Accepted Answer · 2018-11-05 18:21:15Z

0

If you are familiar with The Component Lifecycle, use componentWillReceiveProps, and set there then new state

componentWillReceiveProps(nextProps) {
   if(this.props.index !== nextProps.index) {
     this.setState({index: nextProps.index})
   }
}

And you can hold your value in state, so on componentWillMount set your state.index to props.index

answered Nov 5, 2018 at 18:21

oma

1,89414 silver badges14 bronze badges

2 Comments

Zafir Stojanovski Over a year ago

componentWillUpdate(){ this.setState({index: this.props.index}) } causes Maximum Update Depth Exceeded exception

kojow7 Over a year ago

Isn't componentWillReceiveProps going to be deprecated soon and shouldn't be used?

Prasun · Accepted Answer · 2018-11-05 18:30:31Z

0

In the constructor read the value from props and set that to state, this way you will get the props.index and maintain the changes in the state afterword. In the onChange event handler you can update index with the current value.

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      index: props.index
    }
  }
  ...
  render() {
    const { index } = this.state;
    ...
  }
}

Hope this will help!

answered Nov 5, 2018 at 18:30

Prasun

5,0132 gold badges23 silver badges23 bronze badges

5 Comments

Zafir Stojanovski Over a year ago

Sadly no, because the constructor is called when the child component is first created, but I need the initializing to be asynchronously, i.e. when I click the button, the input fields are initialized.

Prasun Over a year ago

Oh, but you didn't mention about asynchronously initializing in the question also nothing about button either :) ...

Zafir Stojanovski Over a year ago

True, sorry. You got any other solution?

Prasun Over a year ago

Nope, can you please share more detail, how the parent and child related and when you are initializing the child component. If possible share some code.

Zafir Stojanovski Over a year ago

I found a solution, it lies with uncontrolled components.

Zafir Stojanovski · Accepted Answer · 2018-11-05 18:52:13Z

0

Found solution, this should not be done with controlled components, rather uncontrolled components

answered Nov 5, 2018 at 18:52

Zafir Stojanovski

4917 silver badges19 bronze badges

Collectives™ on Stack Overflow

Initializing an input field with props value in react

4 Answers 4

1 Comment

2 Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related