Does not detect form fields

[rastafrange]

Hello, I am trying to use your package however when I build my website with Netlify, it only detects one "field":

Detected form fields:
7:45:25 PM:  - bot-field

And I don't understand what is wrong with my code. I am building a form using Netlify, Formik on a Docusaurus built website.

import React, { useReducer } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import { Grid } from '@material-ui/core';
import { NetlifyForm, Honeypot } from 'react-netlify-forms'
import { useState } from "react"
import { useNetlifyForm, NetlifyFormProvider, NetlifyFormComponent} from "react-netlify-forms"
import { useFormik } from 'formik'
import {Field} from "formik";

import "./styles.module.css";

const useStyles = makeStyles(theme => ({
    input: { 
        minHeight: 100,
    },
  }));

const Commentbox = () => {
    const classes = useStyles();
    const netlify = useNetlifyForm({
      name: 'approved-comments',
      honeypotName: 'bot-field',
      onSuccess: (response, context) => {
        console.log('Successfully sent form data to Netlify Server')
      }
    })
    const {
      handleSubmit,
      handleChange,
      handleBlur,
      touched,
      errors,
      values
    } = useFormik({
      initialValues: { name: '', email: '', commentaire: '' },
      onSubmit: (values, {setStatus, resetForm}) => {
          netlify.handleSubmit(null, values);
          resetForm();
          setStatus({success: true});
  },
      validate: (values) => {
        const errors = {}
        if (
          !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)
        ) {
          errors.email = 'Adresse email invalide'
        }
        return errors
      }
    })

    return (
    <NetlifyFormProvider {...netlify}>
        <h3>Laissez un commentaire 😃</h3>
        <NetlifyFormComponent onSubmit={handleSubmit}>
          <Honeypot />
          {netlify.success && (
            <p sx={{ variant: 'alerts.success', p: 3 }}>
              Merci d'avoir commenté 😃
            </p>
          )}
          {netlify.error && (
            <p sx={{ variant: 'alerts.muted', p: 3 }}>
              Désolé, votre commentaire n'a pas pu être enregistré 😢.
            </p>
          )}
          <input type="hidden" name="form-name" value="approved-comments" />
         <TextField
          required
          id="name"
          label="Nom"
          variant="outlined"
          fullWidth
          margin="normal"
           onChange={handleChange}
           onBlur={handleBlur}
          error={errors.name}
          value={values.name}
          style = {{width: "70%"}}
        />
        <TextField
          required
          id="email"
          label="Email"
          variant="outlined"
          fullWidth
          margin="normal"
           onChange={handleChange}
           onBlur={handleBlur}
           error={errors.email}
           value={values.email}
          style = {{width: "70%"}}         
        /> 
         <TextField
          id="commentaire"
          label="Commentaire"
          variant="outlined"
          fullWidth
          margin="normal"
          multiline
           onChange={handleChange}
           onBlur={handleBlur}
          error={errors.commentaire}
           value={values.commentaire}
          inputProps={{
            className: classes.input
          }}
          style = {{width: "70%"}}          
        />   
        <button class="button button--lg button--primary" type="submit">
                Publiez votre commentaire
        </button> 

        </NetlifyFormComponent>
      </NetlifyFormProvider>
    )

  }

export default Commentbox;

Is it because I am using Material UI that it is not detecting the fields ?

Because when I try to submit the form, I only receive blank submissions :/

Thanks

[rastafrange]

In fact you have to put

<input type='hidden' name='name' value='values.name' />
<input type='hidden' name='email' value='values.email' />
<input type='hidden' name='commentaire' value='values.commentaire' />

inside the form, I have put it right before my <button class="button button--lg button--primary" type="submit"> And now fields are detected by netlify !

[Pyrax]

Hey, glad to hear it's working now!

While your solution works as well, I think your textfields were just missing a name attribute which is needed by Formik.

I realize that useFormik is kinda error-prone in this regards (name is usually injected automatically with <Field> which is not available with useFormik). I will have a look at other options for future versions.