question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

checkboxes names using dot `.` notation and numbers to be returned as an object in the onSubmit callback

See original GitHub issue

Is your feature request related to a problem? Please describe. I’m trying to organize the return of the onSubmit callback from checkbox input and facing some issue.

shown there: https://codesandbox.io/s/react-hook-form-form-context-53gv0

Describe the solution you’d like I was expecting the returned object to be something like this:

{
  hey: {
    1: "on',
    2: "on',
    3: "on',
  },
  hello: [undefined, "on", undefined, "on", "on"],
  hi: { // This object is correct
    'here': 'on',
    'there': 'on',
    'somewhere': 'on',
  },
}

Describe alternatives you’ve considered I can always rename the keys to a format that would allow me to reconstruct that object

Additional context I’m having a group of checkboxes with non-sequencial IDs, and would like to easily recuperate which item was checked when submitting the form.

[{
  id: 42,
  name: 'hi',
},
{
  id: 18,
  name: 'hey',
}
,{
  id: 100,
  name: 'hello',
}]

Thanks

Edit: forgot to mention to look at the console for -> console.log("onSubmit", data);

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
stramelcommented, Aug 15, 2019

@tombertrand I think the parser is getting confused by the number key. If you change the first number key to a string value hey.'1' it will return close to the object you are expecting.

hey: {
	'1': 'on',
	2: 'on',
	3: 'on',
}

although, that might not exactly work if you are looking up by a number.

1reaction
bluebill1049commented, Aug 16, 2019

thanks @tombertrand 🙏 I will update the website to mention that 👍

Read more comments on GitHub >

github_iconTop Results From Across the Web

How do I use React and forms to get an array of checked ...
Is there a way to simply have a function trigger (onChange callback?) that reads the checked/unchecked status of my form input elements and...
Read more >
Form - CORE Design System
Form composes together: formik state management; core-react Input, Select, etc. components; Show and edit views, discretely known as create, read, update ...
Read more >
React Forms: Using Refs - CSS-Tricks
React provides two standard ways to grab values from <form> elements. The first method is to implement what are called controlled components ...
Read more >
React localStorage: set and get items with hooks - CopyCat Blog
Learn the basics of React localStorage. In this tutorial, we'll focus on how to use the localStorage storage type with React and hooks....
Read more >
JavaScript Tutorial: The Basics
This version added exponential operator ( ** ), block-scoping of variables and functions, await and async keywords for asynchronous programming, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found