Toggle property of different states

toggle state meaning
toggle state react hooks
react: use state to toggle an element
toggle state with prevstate
aria-expanded aria-controls example
aria-expanded= true not working
toggle aria-expanded jquery
jquery toggle switch

Small question here. I have 3 div classes that contain images that I want to toggle the state property for each picture every time a user presses on one of the images (div actually). The states are as follows:

  constructor(props) {
    super(props);

    this.state = {
      img_1: 0,
      img_2: 0,
      img_3: 0
    };
  }

And I want to have a single handle function that can toggle for all the different images that I have. Here is the div code (its the same for every image):

<div className="pics" onClick={(e) => this.handlePic(e)}>
  <h2>First picture</h2>
  <img alt="" src={pic1} className="tier2"/>
</div>

And The handle function is empty at the moment, because I have no idea how to pass into it the name of this.state.img_1. The value of course should toggle between 0 and 1, but I want to be able to use a single function for the toggle of all 3 images. I am not sure if my question makes a lot of sense, please let me know if you want me to explain a little bit more of my situation.

Thank you!

You have 3 different div, in each of your dives define an onClick={()=>this.myhandle(nameofpic)} (you can hardcode nameofpic here,for example in each div put a name like "img1","img2" ... instead of nameofpic) Then in your myhandle() put your ifs ,like this :

myhandle(nameofpic){
if(nameofpic==="img_1")
 {this.setState({img_1:"valuechange"})
  } 
if(nameofpic==="img_2")
 {this.setState({img_2:"valuechange"})
 }
if(nameofpic==="img_3")
 {this.setState({img_3:"valuechange"})
 }}

I hope you get the idea and works for you

CSS Toggle States, The toggle-group property allows the toggle state of every other element in  A toggle button allows the user to change a setting between two states. You can add a basic toggle button to your layout with the ToggleButton object. Android 4.0 (API level 14) introduces another kind of toggle button called a switch that provides a slider control, which you can add with a Switch object. SwitchCompat is a version of the Switch widget which runs on devices back to API 7.

You should create a separate component for Image, which will handle it's own state. This way you can manage any number of Images not just 3.

function Image({url}) {
const [overlay, setOverlay] = useState(false);

const toggleState = () => {
setOverlay(!overlay)
}

return <img src={url} alt={url} onClick={toggleState} />
}

Here overlay can be anything.

Now you can use this component any number of time and it will have it's own state management.

Easy Toggle State, To do so, add this attribute to your <html> element with your new prefix: <html data-easy-toggle-state-custom-prefix="my-prefix">. It will so be set to all attributes​  2.1.230 Part 1 Section 17.7.3, Toggle Properties. 11/19/2019; 2 minutes to read; In this article. a. The standard states that if a toggle property is not explicitly set in direct formatting, the toggle property appears at multiple levels of the style hierarchy, and the value specified by the document defaults is true, the effective value is true.

Here is the solution if you are not using hooks then,

In render method(passing static string in parameter for handler method):

<div className="pics" onClick={e => this.handlePic('img1')}>
    <h2>First picture</h2>
    <img alt="" src={pic1} className="tier2" />
</div>

Your handler(Setting dynamic key):

handlePic = key => {
    this.setState(prevState => ({ [key]: !prevState[key] })); // This will toggle 0 or 1 simultaneously.
};

Use State to Toggle an Element React - JavaScript, Our mission: to help people learn to code for free. We accomplish this by creating thousands of videos, articles, and interactive coding lessons - all freely available​  note the difference between the css properties 'visibility' and 'display'. 'toggle()' changes the 'display' property which will hide the element and makes the space "available" for other elements whereas with 'visibility' the element keeps occupying space. as the OP states in the last sentence, that's why 'toggle()' won't work here– MallardMar 11 '14 at 14:57

Programming Flex 3: The Comprehensive Guide to Creating Rich , Although each type behaves similarly, they have different intended uses. However, you can set the toggle property of a button or link button to true, have two states—selected and deselected—and it will toggle between those states each  Use Hover State if you want your component to change and display a different state when a user hovers over the component. In Design mode, click the + button next to the Master component's Default State in the Property Inspector, and select Hover State. When using Hover State, you don't have to go to Prototype mode to wire the interaction. It's automatically done for you.

VBA Developer's Handbook, Except for the key-state toggling properties (CapsLock, NumLock, and ScrollLock​), creating the Keyboard class was simple. Each other property corresponds  State buttons are components that indicate a logical state. Properties control the appearance and behavior of a state button. Use dot notation to refer to a specific object and property.

MATLAB Programming for Engineers, A toggle button is a type of button that has two states: on (depressed) and off (not The 'Value' property of the toggle button is set to max (usually 1) when the are essentially identical to toggle buttons except that they have different shapes. Toggle control in Power Apps. 10/25/2016; 2 minutes to read +1; In this article. A control that the user can turn on or off by moving its handle. Description. A toggle is designed for recent GUIs but behaves the same way as a check box. Key properties. Default – The initial value of a control before it is changed by the user.

Comments
  • Thank you, I tried to use this part of code, but something that I am having hard time understanding is how can I set the 'overlay' to anything that I want? I have 3 different states, each state for each picture. How can I update the overlay to work for all possible states that I have?
  • By setting overlay to anything I mean. You can your own state variable instead of overlay. It's just a state name. Since the code example above uses React Hooks, i think you can go though blog.usejournal.com/…, to understand hooks.