Use State to Toggle an Element - instructions

[Sharad823]

Tell us what’s happening:
Describe your issue in detail here.
I’m having trouble understanding the instructions for this exercise. I am not exactly sure what questions I need to ask to get clarity on the instructions. But the following questions come to mind. What is a “click handler”? What does it mean to "pass a function to setState? What is a React “class method” and how is a method defined? What is the “constructor” and what is the “method” in the constructor?

  **Your code so far**

class MyComponent extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    visibility: false
  };
  // Change code below this line
  this.setState(state => ({
    toggleVisbility
  }));
  // Change code above this line
}
// Change code below this line

// Change code above this line
render() {
  if (this.state.visibility) {
    return (
      <div>
        <button onClick={this.toggleVisibility}>Click Me</button>
        <h1>Now you see me!</h1>
      </div>
    );
  } else {
    return (
      <div>
        <button onClick={this.toggleVisibility}>Click Me</button>
      </div>
    );
  }
}
}

  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36

Challenge: Use State to Toggle an Element

Link to the challenge:

freeCodeCamp.org

[jwilkins.oboe]

Hi @Sharad823 !

@Sharad823

What is a “click handler”?

An onclick handler calls a function which performs a certain action.
This is the onclick the challenge is referring to.

onClick={this.toggleVisibility}

One of your tasks in this challenge is to create a toggleVisibitliy function that will update state based on a set of conditions. If state is currently true, then you will update it to false or else if state is currently false then update it to true.

You will write this function above the render

// Change code below this line
  toggleVisibility() {
    this.setState(state => {
    // if/else statement will go here
    });
  }
// Change code above this line
render() {

@Sharad823

What does it mean to "pass a function to setState?

In react, you can have a situation where there are multiple setState calls happening. We need a way for sure that we are working with the current value of state. So that is why we pass in a function to setState.

FCC lesson example:

this.setState(state => ({
  counter: state.counter + 1
}));

This guarantees that we are working with the current value.
This matters because we need to know for sure if visibility is true or false so we can update state correctly.

I will also link the react docs explanation for handling events.

Handling Events – React

@Sharad823

What is a React “class method” and how is a method defined?

The method they are referring is that toggleVisibility() function from earlier.
I would suggest reading through that link I provided for you that will walk you through an example of how this method is working in the class.

@Sharad823

What is the “constructor” and what is the “method” in the constructor?

This is the class constructor.

constructor(props) {
  super(props);
  this.state = {
    visibility: false
  };
  // Change code below this line

//bind the this keyword to the toggleVisibility method  

  // Change code above this line
}

You can also review the binding of the this keyword here

freeCodeCamp.org

---

I know that learning react can be confusing at first.
What worked for me was to review the examples in the documentation.

I would read through that link I gave you and it should help you understand better.

Hope that helps!

[lasjorg]

Just an FYI. You do not need any logic to figure out what the current state is, the updater function should just toggle the boolean value to its opposite value.

!state.someBooleanValue.

You technically do not have to use constructor binding, you can pass the challenge using arrow syntax. However, fCC does not teach the syntax but you can find it in the React docs that were linked to.

toggleBooleanStateValue = () => {
  this.setState(state => ({ someBooleanStateProperty: !state.someBooleanStateProperty }))
}

[jwilkins.oboe]

@lasjorg

You technically do not have to use constructor binding, you can pass the challenge using arrow syntax.

@Sharad823 if you decide to go with this approach then make sure you write your code in the correct spot.

As of now, you wrote your code in the constructor and that will not pass the tests because that section was supposed to be for the binding.

Instead of writing your code here

@Sharad823

  // Change code below this line
  this.setState(state => ({
    toggleVisbility
  }));
  // Change code above this line
}

move it to the second set of change code comments.

@Sharad823

// Change code below this line

// Change code above this line
render() {

[Sharad823]

@jwilkins.oboe and @lasjorg , thank you so much for the help. I will look at the React documentation and review your suggestions then give it another try.

[Sharad823]

@jwilkins.oboe, after reading through your suggestions and looking at the React documentation I am even more confused. First, after thinking about it, it seems I should already know what “state” and “props” are but I don’t know what these are, even after reviewing the previous lessons and React documentation. Also, you mentioned, that in React “you can have a situation where there are multiple setState calls happening” - what is a setState call? I see the example where we “pass a function” to setState, but don’t think I understand what it means to “pass a function.” I’ve seen many examples of a class constructor - but what actually is a “class constructor” - what is a “class” and what is a “constructor?” I don’t understanding binding either even though I’ve gone through the binding lesson four times. Reading through the react documentation, there are even more words/terms/concepts I don’t understand, and each time look something up, find more documentation that refers to more things I don’t understand. It seems I am missing something here…maybe there is a pre-requisite to this course that I am missing (so far I have done the curriculum in order, starting with Responsive Web Design, then Javascript Algorithms, then this one - Front-End Development Libraries). I’ve also watched youtube videos on React. There seems to be something more basic that I am missing.

[jwilkins.oboe]

It sounds like you are trying to tackle way to many react concepts all at once and that is where the confusion is coming in.

My advice would be to start with once concept at a time and practice with different examples.

You could start with a concept like props.
You could review the FCC lessons and react docs.
Play around with the examples they gave you.
Create examples of your own.

Then if you are still unsure what is going on, create a new post in the forum and ask a question about props.

Once you feel ready, move onto the next concept like state.
Read through the docs, watch videos, and ask questions when you get stuck.

But trying to tackle all of these concepts all at once is just going to leave you feeling confused.

You also have to remember that these concepts won’t sink in until you start practicing them.
Practicing with different examples will help.
You can also ask the forum for different examples.

For me, I didn’t understand react at first.
I struggled to go through the lessons too and a lot of people do.

But trying to tackle it in small bit size pieces and moving at a slower pace will help.

[lasjorg]

@Sharad823

I see the example where we “pass a function” to setState, but don’t think I understand what it means to “pass a function.”

It just means setState accepts an object or a callback function. You will most often see the callback used inline.

toggleBooleanStateValue = () => {
  this.setState(state => ({ someBooleanStateProperty: !state.someBooleanStateProperty }))
}

This part is the inline function.

state => ({ someBooleanStateProperty: !state.someBooleanStateProperty })

We can also write the callback using a normal anonymous function.

toggleBooleanStateValue = () => {
  this.setState(function(state) {
    return {
      someBooleanStateProperty: !state.someBooleanStateProperty
    }
  })
}

The function does not have to be inline, we can also define the function and pass it to setState.

/* declared outside the class */
function setStateCallback(state) {
  return { someBooleanStateProperty: !state.someBooleanStateProperty}
}

/* passed to setState inside the class */
toggleBooleanStateValue = () => {
  this.setState(setStateCallback);
}

---

@Sharad823

I’ve seen many examples of a class constructor - but what actually is a “class constructor” - what is a “class” and what is a “constructor?” I don’t understanding binding either even though I’ve gone through the binding lesson four times.

Some MDN links:

Classes - JavaScript | MDN

constructor - JavaScript | MDN

Function.prototype.bind() - JavaScript | MDN

---

It isn’t bad that you want to better understand the technical aspect of what is going on, but I wouldn’t let it stop you from learning this on a more superficial level just so you know enough to use it without fully understanding all the ins and outs.

Just like you can learn to drive a car without knowing anything about how it actually works under the hood.

[Sharad823]

@jwilkins.oboe , thanks for the support. I’ll try your suggestions.

[Sharad823]

@lasjorg , your analogy of driving a car seems like it should make sense. Going with this analogy, the problem is that in React (and maybe JS in general), I can’t find the steering wheel, brakes, gas pedal, or speedometer, and I can’t see the road either. It’s impossible to drive without these basic things. In all seriousness - where do I find them?