Is there a different way to set state in this example instead of using this.state?

I dont think having a toggle would be a good idea since i want the On to only turn On.
Im not sure how else to do this component.
thank you!

import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; function Room() { const [isLit, setLit] = React.useState(false); const lightedness = isLit ? "lit" : "dark"; return ( <div className={`room ${lightedness}`}> the room is {lightedness} <br /> {/* <button onClick={() => setLit(!isLit)}>flip</button> */} <button onClick={() => setLit(this.state = false)}>Off</button> <button onClick={() => setLit(this.state = true)}>On</button> {/* <button onClick={() => setLit(setLit)}>Off</button> */} </div> ); } ReactDOM.render(<Room />, document.getElementById("root"));

Hi,
I can’t see what’s wrong with the way you wrote it, but if all you want to do is render a string, you could set the string as state directly instead:

const [isLit, setLit] = React.useState('lit');
<div className={`room ${isLit}`}>
      the room is {isLit}
<button onClick={() => setLit('dark')}>Off</button>
<button onClick={() => setLit('lit')}>On</button>

With the toggle variant, having just one button for switching the light on and off would be more efficiant.

1 Like

Hello again. Sorry a different question but related:

Assuming
friends = [{key: value, key2: value2}, {key: value, key2: value2}, {key: value, key2: value2}];

class Friend extends React.Component { render(){ const friend = friends[0]; return ( <div> <h1> {friend.title} </h1> </div> ) } }

why do we still have to inject JS here if the variable friend is defined inside the class’s render function already?

Sorry, I don’t understand the question. :frowning:

Thats alright. I hope i can come back next time with a better phrasing of it. For now, here is another one:

const video = { title: 'a', play(){ console.log(this); } } video.stop = function(){ video.stopText = 'stop'; console.log(this); } video.play(); video.stop();

why is it that when i call play after stop, the stopText shows up on the console. But if its called as such on the codebyte here, when logging ‘this’, the stopText is omitted? The function is defined before calling play() so im not sure whats happening here. I hope my question is understandable this time :slight_smile:

You’re adding a property to video here:

video.stop = function(){...

That happens before you call any of the methods. So your video object looks like this when you first call .play():

const video = {
  title: 'a',
  play(){
    console.log(this);
  },
  stop: function(){
    video.stopText = 'stop';
    console.log(this);
  }
}

Then you call .play() which is logging this. this is video so it logs all its properties including .stop(). But since .stop() isn’t called yet, .stopText() isn’t a property of video yet as it will not be added until you call the method .stop().

1 Like

is there another way to write this so that the stop() method gets added? it sounds like this way of writing it might not be optimal? For example, if i never run video.stop() but i would like to get the full properties of the object, is that possible?

Hmm, I’m not really sure what you want to achieve with the code. To me it would make sense to write .stop as a property of video from the very beginning rather than adding it later on. .play() is a default property of a video anyway. And so is .pause()