React-Toolbox Component

Question

While coding up an <Input /> Component in React-Toolbox, when defining the error Prop, it show by default on the page. How do I either dynamically render the error, or configure it. Code below ... So you always see the error message "Invalid email address" below the input field.

    <Input
      type='email'
      label='Email address'
      icon='email'
      value={this.state.email}
      onChange={this.handleChange.bind(this, 'email')}
      hint='email@domain.com'
      error="Invalid Email Address"
    />

Answer 1

Because the error is being shown whenever that property isn't empty, you need to only pass the error property when there is an actual error with the user input.

So, to fix this you could have an emailError property in your component's state that determines this, so whenever this new property is set to true with this.setState() you will trigger a re-render and thus be sending down the Invalid Email error string as a property to the React-Toolbox Input Component.

<Input
  type='email'
  label='Email address'
  icon='email'
  value={this.state.email}
  onChange={this.handleChange.bind(this, 'email')}
  hint='email@domain.com'
  error={this.state.emailError ? 'Invalid Email Address' : ''}
/>