Using React Dropzone together with React Final Form

Question

Trying to figure out how to use these two components together. There's an issue on github that people refer to to get it up and running, but I can't figure it out. The gist of it is this:

<Field name={`logo`}>
  {(fieldprops) => (
    <div>
      <label>Logo</label>
      <Dropzone 
        onDrop={(files, e) => {
          props.change(`logo`, files);
          props.blur(`logo`);
        }}
      />
      <pre>{JSON.stringify(fieldprops, 0, 2)}</pre>
    </div>
  )}
</Field>

Using that exact code throws and error for me: TypeError: children is not a function

I've setup a reduced test case on Code Sandbox that uses hooks and file preview. I also tried looking at custom inputs in the docs, but seems like something is missing for it to work. Would be super happy if someone could point me in the right direction.

Answer 1

You don't have an onChange callback in your Dropzone component. How about this?