Can't get an input value wich comes from list on submission

Hi there,

Netlify form don’t receive some inputs’s values that are:

  • created from an Array.map()
  • functionally filled

See code below:

<form
  method='post'
  action='#'
  name='booking'
  className='booking'
  data-netlify='true'
  data-netlify-honeypot='bot-field'
>
<input type='hidden' name='form-name' value='booking' />

{dateToBook.map((date, id) => (
  <>
    <label
      key={id}
      htmlFor={`date-${id}`}
    >{`date-${id}`}</label>

    <input
      name={`date-${id}`}
      id={`date-${id}`}
      type='text'
      value={date}
      key={id}
      disabled={false}
      className='field date'
    />
</>
))}

{/* Some others fields that are correctly receiving by netlify */}

</form>

if someone have solution…
Coded with GatsbyJS

hi there, did you work through these posts already?

they might provide some useful starting points :muscle:

Hi, I read the first one it seems not helping me (I’m not a very good English speaker so I might misunderstood some points).

I’m going to read the second one, thank you.

let us know if those articles help or not :slight_smile:

So, I’m still stuck with that.

I tried to create some others input by a map method and those last work perfectly.

I must notice that the data include in my array come from a provider’s state and the inputs are correctly fill with data in their value props.

I’ll make a CodeSandBox for trying to reproduce the bug and link it here.

For the moment, if someone have an idea of where I could did a mistake…

Well, after many attempts I’m ought to say I’m done ! ^^’

I can’t get values in submissions throught an Array.map() method (else if data inside the array are hard coded but that’s not my purpose)

I think there’s something to do with the component lifecycle but I ain’t find.

Is anybody here ever had that trouble ?

I reproduced the problem on a gatsby starter so there are the sources, the CodeSandbox and the deployed Netlify URL is linked on the repo if that may help.

Thank you all.

I think the basic thing that was missed is that indeed, all fields must be hard coded - we have to see ANY field you want us to accept at DEPLOY TIME, so your input html (not javascript, but an .html file with your form definition) needs to predefine all fields you MIGHT receive. It’s ok to not receive some, we are fine with none or many fields that were predefined. And we’ll “accept” extra fields with submission - we’ll return a good HTTP status - but we will not STORE those “extra” values.

Hopefully that is the guidance you need :slight_smile:

So, if I think users may create ten input I have to hard- code ten input (in .html file) with their respective ‘name’ props… :thinking:

If that’s correct, well, indeed you perfectly helped me.

Thank you very much.

@calag4n, yes, if you have javascript on the deployed page making those ten inputs, there also needs to a a version of the form created with HTML only. You don’t have to use this form. No user even needs to visit or use this version of the form.

It must exist, though, for Netlify to create the endpoint to receive the POSTed form data. If there is no HTML version with the inputs, the endpoint won’t be ready to receive the input because it didn’t see it in the HTML form at deploy time. If the javascript created for sends the input, the endpoint will ignore it.

If you make an HTML version, even if it isn’t even visited by a person, our build system will process the form at deploy time and then, when the javascript version of the form submits the input, the Netlify endpoint for the form will be able to receive the input successfully.