default value for input is not working

[Viking Zhang]

Hey guys,
I am using react-validify right now, I run into a issue you guys may give a hand.
My input wrapper like this :

// Input.jsx
export default ({ error, ...props }) => (
  <div>
    <p>{error}</p>
    <input {...props} />
  </div>
);

And I am using it like the code below in another component

<Input type="text" name="title" className="form-control" ref={(title) => {this.title = title}}
                id="titleInput" value='hello there' />

This value will be clear to empty, When I use defaultValue instead of value, React will throw a error, because use both defaultValue and value on input element.

Any thought? Thx a lot!

[Zach Silveira]

<Form
  values={{ title: 'Test' }}
  rules={{
    email: 'email|required',
    password: 'required|min:8'
  }}
>
  <Input name="title" />
  <div
    submit
    onClick={values =>
      console.log(
        'this will be called if validation passes',
        values
      )
    }
  >
    Submit!
  </div>
</Form>

There is no reason to use a ref or to use defaultValue, you can pass the values in to the form component itself. let me know if that doesn't work!

[Viking Zhang]

thx @zackify, it works like a charm, I got another question, is there a way to set checked property to a checkbox? pass values seems not working.

[Zach Silveira]

You can put type=checkbox and it should work fine. We have some tests for them that might help https://github.com/navjobs/validify/blob/master/tests/checkbox-radio.js#L13