How do I programatically fill input field value with React?

Question

I have a modal with some input fields. I can easily pass the data automatically with the user typing an input, using onChange function in the input field, as

Answer 1

Good question. I'm having the same issue, and just found a solution.

The problem is that:

• You can't just use the default state of the modal component to set the initial input value, because the modal renders one time within the parent component (starting off invisible), so the default state of the Modal wont keep up with any changes to the 'pre-filled' info in the store that the inputs within the modal require access to.
• You can't use the value attribute of the input to reference some redux store prop, since this is needed to reference the onChange function so the user can make changes to that pre-filled info.
• And, you can't use the onChange function to set the initial value, because it is required to update the local state with the users changes - not set an initial value. Anyway, this requires the user to click on something, and you want the modal inputs to be pre-populated before the user does anything as soon as the modal opens...

So. What we need is to update these input fields every time the Modal attribute isModalOpen (or whatever you are using) changes.

(ie, pre-populate the fields when the Modal is opened).

Again, note that opening the Modal is not RENDERING the modal, it was already rendered, once, and has sat there being invisible until that isModalOpen attribute changed to true.

The Solution:

Step 1: make a handler function in the Modal component that prefills the inputdata by updating the local state of the Modal component. Mine looks like this :

handlePreFillModalInputsOnOpen = () => {
    this.setState(() => ({
        orthForm: this.props.matchLexUnit['orthForm'],
        orthVar: this.props.matchLexUnit['orthVar'],
        oldOrthForm: this.props.matchLexUnit['oldOrthForm'],
        oldOrthVar: this.props.matchLexUnit['oldOrthVar'],
        source: this.props.matchLexUnit['source'],
        namedEntityCheck: this.props.matchLexUnit['namedEntityCheck'],
        styleMarkingCheck: this.props.matchLexUnit['styleMarkingCheck'],
        artificialCheck: this.props.matchLexUnit['artificialCheck'],
        error: ''
    }));
};

Step 2: Make that function fire ONLY when the isOpen attribute of the modal changes from false to true. (This is the meat of your problem I think). Use the lifecycle method componentDidUpdate. This will execute every time the props of the modal change.

componentDidUpdate(prevProps) {
    if (this.props.isModalOpen === true && prevProps.isModalOpen === false) {
        this.handlePreFillModalInputsOnOpen();
    }
}

Watch out

• make sure that you have a conditional in componentDidUpdate, otherwise you can run into infinite-loop/performance issues
• if you have the possibility of null values icoming in as the prefilled input info, make a null-check so that they will not be passed into the local state.

Hope this helps :)