how to dynamically add element property

Question

I am working on reactjs app and I am stuck on adding a property dynamically.

I have email input field and a submit button and when a submit button is clicked I want to add error message if email is not valid. Here is what I have done so far...

<TextField label='Email'/>
<Button onPress()=>this.doSomethingFunction() />

I want to doSomethingfunction() to dynamically add error property as follows

 <TextField label='Email' error="invalid entry"/>

the problem I am facing is if I leave error property, as shown above, the error message appears even before user enters email address. The solution I am thinking of is to add the property after finding out if it is not valid but I dont how to do it dynamically.

Answer 1

You can use state variable to update UI. so please try to do as following:

constructor(props) {
  super(props);
  this.state = {
    validStatus: 0 // initial state, 1: valid state, 2: invalid state
  } 
}

doSomethingFunction = () => {
  ...
  if (email is valid) {
    this.setState({ validStatus: 1 });
  } else {
    this.setState({ validStatus: 2 });
  }
  ...
}

render() {
  const { validStatus } = this.state;
  return (
    <View>
      ...
      {validStatus !== 2 && <TextField label='Email'/>
        <Button onPress()=>this.doSomethingFunction() />}
      {validStatus === 2 && <TextField label='Email' error="invalid entry"/>}
      ...
    </View
  );
}

Answer 2

Just use state. You can set the TextField error property to receive emailError state. So when you click at button, the emailError value will be changed.

class MyComponent extends React.Component {
  state = {
    emailError: ''
  }

  validate = () => {
    this.setState({emailError: 'invalid entry'})
  }

  render () {
    return (
      <View>
        <TextField label='Email' error={this.state.emailError} />
        <Button onPress={this.validate}/>
      </View>
    )
  }
}

Answer 3

This can be done using the state of component and doing some conditional rendering based on state. Here is a rough pseudo code which shows how you can use state to do conditional rendering

class MyComponent extends React.Component {

  constructor() {
    super();
    this.state = {isError: false}
  }

  validate() {
    if (inputIsInvalid) {
      this.setState({isError: false})
    }
  }

  render() {
    let textField = <TextField label='Email'/>;
    if(this.state.isError)
      textField = <TextField label='Email' error="invalid entry"/>;
    return (
      {textField}
      <Button onPress()=>this.validate() />
    );
  }

}

Answer 4

I've never used react, so I could be far off base, but this documentation indicates that error is a boolean -- so if it's set at all, it will probably be interpreted as "true".

You can change the attributes on a standard HTML element with myElement.setAttribute("myAttribute", "myValue") . If this works for react components (without confusing react), then you could just set the error attribute when you want it to be true and remove it when you don't. (If react doesn't like for you to do this, then hopefully the above link can get you on the right track.)