Change textfield content

[Flow-Flinc]

I want to update the textfield content from outside, so I give in a new value into field value. But the component don't accept the new content.

I forked the code and removed the state of the field value and ask if this is a feature you want to have on your main branch?

https://github.com/Flow-Flinc/react-native-material-textfield

[karanpratapsingh]

I just faced this issue, I think this can be resolved by using a .setValue method via ref as mentioned in docs

[ajinkyadesai-git]

value is not getting set when i pass prop, value={this.state.customerList}

Edit: Able to set through

1. ref={ref => { this.customerName = ref; }}
2. this.customerName.setValue( );

[vandero]

Hi, I am seeing the same problem. Updating a bound state variable does not rerender the text contents. I don't think it should be necessary to create a ref for each and every textfield used.

[hmolotsi]

@vandero I agree...what might work for you is to wrap this component so that you can call setValue when the component updates:

import React, {
  Component
} from 'react';

import {
  TextField,
} from 'react-native-material-textfield';

export class MyTextField extends Component {
  constructor(props) {
    super(props);
  }

  componentDidUpdate(prevProps) {
    if ( this.props.value !== prevProps.value ) {
      this.textFieldRef.setValue(this.props.value);
    }
  }

  render() {
    return (
      <TextField
        {...this.props}
        ref={reference => { this.textFieldRef = reference }}
      />
    );
  }
}

[nadav2051]

It happens because getDerivedStateFromProps prevents it from updating.

I opened a pull request to address this issue.

https://github.com/n4kz/react-native-material-textfield/pull/278

[sagormax]

value is not getting set when i pass prop, value={this.state.customerList}

Edit: Able to set through

1. ref={ref => { this.customerName = ref; }}
2. this.customerName.setValue( );

For functional component: <OutlinedTextField ref={ref => ref?.setValue(nameValue || '') } />