'Formik throwing Error: JSX props should not use functions in React

This test.tsx:

       <Form>
          <Field name='name' validate={validateFunc}>
            {({ field, form }) => (
                <FormControl isInvalid={form.errors.name && form.touched.name}>
                  <FormLabel htmlFor='name'>Default</FormLabel>
                  <Input {...field} id='name' placeholder='name' />
                  <FormErrorMessage>{form.errors.name}</FormErrorMessage>
                </FormControl>
            )}
          </Field>

yields

Error: JSX props should not use functions  react/jsx-no-bin

I know why this is bad, but I don't know how to change it.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source