I need to prepopulate a form so that users can edit a blog they have previously created. I'm looking for the best-practices way of doing this in React. I am currently passing the value to a component through props, and then setting a state property to equal a props property, but I have read that this is an anti-pattern. I understand 'source of truth'. But what is a better way to do it? I would rather not use redux-form, for now. Below is my title component, and below that is how I call it from the parent. This all works, but is there a better way, in order to avoid setting a state property to a props property?
import React, { Component, PropTypes} from 'react';
export default class DocumentTitle extends Component{
constructor(props) {
super(props);
this.state = {inputVal:this.props.publication.document_title}
this.handleChange = this.handleChange.bind(this)
}
handleChange(event) {
this.setState({inputVal: event.target.value});
}
componentWillReceiveProps(nextProps){
this.setState({inputVal: nextProps.publication.document_title})
}
render (){
return (
<div >
<label>Title</label>
<div>
<input onChange={this.handleChange} id="doc_title" type="text" value={this.state.inputVal}/>
</div>
</div>
)
}
}
call from parent:
<DocumentTitle publication={this.props.publication} />
If publication is maintained in the parent, then there is no need to maintain state, unless there are other reasons: validations for one.
The input could be an uncontrolled component. The onBlur of the input can be used to update the parent.
<input
onBlur={e => this.props.onTitleChange(e.target.value)}
id="doc_title"
type="text"
defaultValue={this.props.publication.document_title} />
The parent component should update the publication state.
<DocumentTitle
publication={this.state.publication}
onTitleChange={this.handleTitleChange} />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With