How to submit data from Formik in React?

Question

Hi everyone, I work on project which has Survey page, part of the site has checkboxes with answers to the question next to them and textarea below that. Now the idea is that when the user fills out the form and clicks Submit button, I need that data to get a printout in the console.log? Here is my SurveyPage.js and CustomCheckbox.js components:

https://pastebin.com/M5ZrZ5q1
https://pastebin.com/s4zXbXwt

Answer 1

Form usually has onSumbit. Assign an attribute to the button inside a form of type=submit. And onSubmit={submitHandler}.

cont submitHandler = () => console.log(answer)

Answer 2

Tnx man a lot.
I set it up that way but I only get one answer per click even though I check more than one? e.g. print in console.log:

{firstQ: 'Answer number 3'}

I checked one, two and three but it print only last one.

Answer 3

onClick={() => {

setChecked(!checked);

setAnswer ( {firstQ: label})

}}

/>

Over here, what is happening is the previous state is being overwritten everytime onClick is called.

Try using spread operator, to spread previousState and then add next state .

For eg:

onClick={() => {

setChecked(!checked);

setAnswer ( ...answer, {firstQ: label})

}}

/>

Something like this.

Answer 4

onClick={() => {
setChecked(!checked);
setAnswer(...answer, {firstQ: label})
}}

it tell me how ...answer is not defined.

Answer 5

Pass answer as a prop, as you pass setAnswer.

Answer 6

page is render but when click on checkbox, get this screen:

TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

22 | name="survey"
23 | onClick={() => {
24 | setChecked(!checked);
> 25 | setAnswer(...answer, {firstQ: label})
| ^ 26 | }}
27 | />
28 | </span>

Answer 7

return <CustomCheck key={index} setAnswer={setAnswer} answer={answer} label={label} />

In the SurveyPage

name="survey"
onClick={() => {
setChecked(!checked);
setAnswer(...props.answer, {firstQ: label})
}}
/>
</span>

Answer 8

now it said that "props" is not defined, I forwarded like this :

const CustomCheck = ({label, setAnswer, answer}) => {

but on this line, props is not defined:

setAnswer(...props.answer, {firstQ: label})

Answer 9

Ah, then just pass answer, no need props.answer.

const CustomCheck = ({label, setAnswer, answer}) => {

setAnswer(...answer, {firstQ: label})

Answer 10

I do so and then click on checkbox I get error from above that I have already sent:

TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

Answer 11

this is what the files look like now:

https://pastebin.com/7AYxnwdM - SurveyPage
https://pastebin.com/s6GKq0k9 - CustomCheckbox