respect the error prop

[romeovs]

I'd like to create a component that uses Inputs.
When I add the error prop, the error is not displayed however.

<Input placeholder="First name" type="text" error="This is an error" />

I know I can trigger an error with setError("error text") but this does not seem to embrace the
declarative style of React.

Would it be possible to respect the error prop? So that when I add it, the error gets shown in the render phase?

[cobbweb]

👍 Was thinking the same thing when I implemented errors the other day

[romeovs]

More specifically: I would like to conditionally show an error state that is already encapsulated in the encompassing component without having to worry about calling the correct setError or removeError stuff.

// in my component
render: function() {
    var input;
    if ( this.state.inputIsValid ) {
        input = (<mui.Input placeholder="placeholder for input" type="text" />);
    } else {
        input = (<mui.Input placeholder="placeholder for input" type="text"  error="invalid input"/>);        
    }
      return (
          <form>
              // ...
              {input}
          </form>);
}

This is a lot more declarative (eg. the error is there or it isn't no functions need to be called).

[romeovs]

I created a pull request that fixes this!

[indiejoseph]

setError("error text") doesn't display error message and got error:
Uncaught Error: Invariant Violation: replaceProps(...): You called setProps or replaceProps on a component with a parent. This is an anti-pattern since props will get reactively updated when rendered. Instead, change the owner's render method to pass the correct value as props to the component where it is created.