TypeError: _this2.state is undefined [React][closed]

Hi everyone,

As I success making only one specific input red into my form, I need now to make it works when an input is added. To be more specific, when one item is added into my question array I need one item to be added into my checkbox array and if I checked the new checkbox, I need the new input to become red.

At the moment, React throw this error when a new input is added:

TypeError: _this2.state.emptyQuestions[idx] is undefined

I think it is because the checkbox array item corresponding to the new input doesn’t exist. I am right ?
Anyways, I would be really glad if someone could help me understand why React throw the error I talk about above.

Here is the link to the Code sandbox with my code : https://codesandbox.io/s/p31y0o75o7

Thanks in advance to have read me until now.:blush:

Hi!
I am not a react developer. But just looked through your error and I found out that there is a concept called “bind” that you can read about and might help you out with resolving your issue.

Thank you for your reply. :blush: Ok, I will check the bind concept and I will see.

Hi everyone,

After a lot of research, I finally found the origin of the problem. It’s this part of my code : newEmptyQuestions[idx].emptyQuestion = !this.state.emptyQuestions[idx].emptyQuestion;

Here is the link to my codesandbox: https://codesandbox.io/s/p31y0o75o7

Do you have any advice or hint to help me make my functionnality works even when a new input is added ? :blush:

Hi everyone,

Finally with the help of my coworker I could resolve my undefined state problem but I have others problems now with my functionnality.:sob:

To make things more clean, I will open an other thread about it when I am ready.

this code may help you. https://codesandbox.io/s/l2xwoy9nwq

actually I did not understand what your project is. but found one of the input field does not work properly. also i searched a lot for component FormTeacher to see the source code, but i could not see that.
why do you have check box evaluation,niveau,certification and exercice? what is the function of them. what is this preview button? what is the function of them.
why do you need this code
const sessionId = document.getElementById("sessionId");
const appSession = sessionId.getAttribute("data");,

I have not found this code makes any change .
i am also learning react. the only one frame work i know is react. if you can share what exactly you want to develop in react, i can be the part of that.,

do you want your input field background color red as soon as you typed something inside? or whenever you checked your checkbox, do you want to get the input field background color red?

Thank you for your reply.:blush:

First things first, what I put inside my Codesandbox is only a part of the application I am doing.

In fact I am working with a custom and private API made by my coworker. So to make my code working into Codesandbox I put the json I received from the API inside the Quiz component (which is the parent of all my application components, FormTeacher included)

I have different modes inside my application and « evaluation, niveau, certification and exercice » are their names.
The preview button displays a preview of the questions and answers inputed in the form when you cliked on it.The questions and answers preview will display below the form.

This code :

const sessionId = document.getElementById("sessionId"); const appSession = sessionId.getAttribute("data");

I need it when I am working with the API made by my coworker. The API
needs it to know in which mode the user is and which kind of data it
needs to send.

Well, for my part, I did a few months bootcamp in my country
where I learned React, Nodejs, Express and Mysql but I finished it
only a few months ago and now I am doing an internship (so I am still
a beginner in the development world). In fact, at the moment, I am
pair working with my coworker who is also my boss, the back-end
developer and my client. So, what I need to develop depends on what
he wants. But the main idea is to develop a japanese and french
language quizzes application. Well, the quizzes are mostly done and
the code I put into the codesandbox is the code for a form which
allows teacher to write quizzes questions and answers.

So to come back on the thread subject, what I am working on
now is a functionality whenever I checked a the input checkbox the
input field background color become red.

I did create another thread with my current code : http://forum.freecodecamp.org/t/react-need-some-help-to-solve-my-functionality-bugs/274329