I&#39;m making a very simple application where you can click on square divs to change their color from white to black. However, I&#39;m having trouble. I&#39;d like to use the onClick function to allow a user to click on a square to change its color, but it doesn&#39;t seem to be working. I&#39;ve tried using spans and empty p tags, but that doesn&#39;t work either. 

Here is the code in question:

    var Box = React.createClass({
        getInitialState: function() {
            return {
                color: &#39;white&#39;
            };
        },

        changeColor: function() {
            var newColor = this.state.color == &#39;white&#39; ? &#39;black&#39; : &#39;white&#39;;
            this.setState({
                color: newColor
            });
        },

        render: function() {
            return (
                &lt;div&gt;
                    &lt;div
                        style = {{background: this.state.color}}
                        onClick = {this.changeColor}
                    &gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            );
        }
    });

Here&#39;s a link to my small project on CodePen.
http://codepen.io/anfperez/pen/RorKge

How to use onClick with divs in React.js

From Stroustrup&#39;s TC++PL, 3rd Edition, Section 21.3.3:  

&gt; If we try to read into a variable v and the operation fails, the value of v should be unchanged (it is unchanged if v is one of the types handled by istream or ostream member functions).

The following example appears to contradict the above quote.  Based on the above quote, I was expecting the value of v to remain unchanged -- but it gets zeroed.  What&#39;s the explanation for this apparent contradictory behaviour?

    #include &lt;iostream&gt;
    #include &lt;sstream&gt;
    
    int main( )
    {
        std::stringstream  ss;
    
        ss  &lt;&lt; &quot;The quick brown fox.&quot;;
    
        int  v = 123;
    
        std::cout &lt;&lt; &quot;Before: &quot; &lt;&lt; v &lt;&lt; &quot;\n&quot;;
    
        if( ss &gt;&gt; v )
        {
            std::cout &lt;&lt; &quot;Strange -- was successful at reading a word into an int!\n&quot;;
        }
    
        std::cout &lt;&lt; &quot;After: &quot; &lt;&lt; v &lt;&lt; &quot;\n&quot;;
    
        if( ss.rdstate() &amp; std::stringstream::eofbit  ) std::cout &lt;&lt; &quot;state: eofbit\n&quot;;
        if( ss.rdstate() &amp; std::stringstream::failbit ) std::cout &lt;&lt; &quot;state: failbit\n&quot;;
        if( ss.rdstate() &amp; std::stringstream::badbit  ) std::cout &lt;&lt; &quot;state: badbit\n&quot;;
        
        return 1;
    }

The output I get using x86_64-w64-mingw32-g++.exe (rubenvb-4.7.2-release) 4.7.2 is:

    Before: 123
    After: 0
    state: failbit

Thanks.



Why does stringstream &gt;&gt; change value of target on failure?

I have 4 states: **dashboard**, **dahboard.main**, **dashboard.minor**, **login**.
dashboard is abstract and it is a parent state for .minor and .main states.
Below is my code:

    .state(&#39;dashboard&#39;, {
            url: &quot;/dashboard&quot;,
            abstract: true,
            templateUrl: &quot;views/dashboard.html&quot;,
            resolve: {
                auth: function ($q, authenticationSvc) {
                    var userInfo = authenticationSvc.getUserInfo();
                    if (userInfo) {
                        return $q.when(userInfo);
                    } else {
                        return $q.reject({ authenticated: false });
                    }
                }
            },
            controller: &quot;DashboardCtrl&quot;,
            data: { pageTitle: &#39;Example view&#39; }
        })
        .state(&#39;dashboard.main&#39;, {
            url: &quot;&quot;,
            templateUrl: &quot;views/main.html&quot;,
            controller: &quot;DashboardCtrl&quot;,
            data: { pageTitle: &#39;Main view&#39; }
        })

As you see in dashboard state I have resolve option. By this I would like to redirect user to login page if he is not authorized. For this reason I use special **authenticationSvc** service:

    .factory(&quot;authenticationSvc&quot;, [&quot;$http&quot;, &quot;$q&quot;, &quot;$window&quot;, function ($http, $q, $window) {
        var userInfo;

        function login(email, password) {
            var deferred = $q.defer();

            $http.post(&quot;/api/login&quot;, { email: email, password: password })
                .then(function (result) {
                    if(result.data.error == 0) {
                        userInfo = {
                            accessToken: result.data.accessToken
                        };
                        $window.sessionStorage[&quot;userInfo&quot;] = JSON.stringify(userInfo);
                        deferred.resolve(userInfo);
                    }
                    else {
                        deferred.reject(error);
                    }
                }, function (error) {
                    deferred.reject(error);
                });

            return deferred.promise;
        }
        function getUserInfo() {
            return userInfo;
        }
        return {
            login: login,
            logout: logout,
            getUserInfo: getUserInfo
        };
    }]);

I check auth value in **config** :

    .run(function($rootScope, $location, $state) {
        $rootScope.$state = $state;
        $rootScope.$on(&quot;routeChangeSuccess&quot;, function(userInfo) {
            consol.log(userInfo);
        });
        $rootScope.$on(&quot;routeChangeError&quot;, function(event, current, previous, eventObj) {
            if(eventObj.authenticated === false) {
                $state.go(&#39;login&#39;);
            }
        });
    });

But unfortunately when I go to my website root or dashboard state I get an empty page. What is wrong with this code? Thanks!

Angularjs ui-router. How to redirect to login page

I&#39;ve been reading a lot of stuff about functional programming lately, and I can understand most of it, but the one thing I just can&#39;t wrap my head around is stateless coding.  It seems to me that simplifying programming by removing mutable state is like &quot;simplifying&quot; a car by removing the dashboard: the finished product may be simpler, but good luck making it interact with end-users.

Just about every user application I can think of involves state as a core concept.  If you write a document (or a SO post), the state changes with every new input.  Or if you play a video game, there are tons of state variables, beginning with the positions of all the characters, who tend to move around constantly.  How can you possibly do anything useful without keeping track of changing values?

Every time I find something that discusses this issue, it&#39;s written in really technical functional-ese that assumes a heavy FP background that I don&#39;t have.  Does anyone know a way to explain this to someone with a good, solid understanding of imperative coding but who&#39;s a complete n00b on the functional side?

EDIT:  A bunch of the replies so far seem to be trying to convince me of the advantages of immutable values.  I get that part.  It makes perfect sense.  What I don&#39;t understand is how you can keep track of values that have to change, and change constantly, without mutable variables.

How can you do anything useful without mutable state?

As a fairly experienced ASP.Net developer just recently starting using MVC, I find myself struggling a bit to change my mindset from a traditional &quot;server control and event handler&quot; way of doing things, into the more dynamic MVC way of things. I think I am slowly getting there, but sometimes the MVC &quot;magic&quot; throws me off.

My current scenario is to create a web page that allows the user to browse a local file, upload it to the server and repeat this until he has a list of files to work with. When he is happy with the file list (which will be displayed in a grid on the page), he will click a button to process the files and extract some data that will be stored in a database.

The last part is not so important, right now I am struggling with something as trivial as building up a list of files, and persisting that list between requests. In the traditional approach this would be extremely simple - the data would be persisted in ViewState. But in MVC I need to pass the data between the controller and the views, and I don&#39;t fully get how this is supposed to work.

I guess I better post my rather incomplete attempt of coding this to explain the problem.

In order to keep my file list data, I have created a viewmodel that is basically a typed list of files, along with some extra metadata:

    public class ImportDataViewModel
    {
        public ImportDataViewModel()
        {
            Files = new List&lt;ImportDataFile&gt;();
        }

        public List&lt;ImportDataFile&gt; Files { get; set; }
    ...

In the view, I have a form for browsing and uploading the file:

    &lt;form action=&quot;AddImportFile&quot; method=&quot;post&quot; enctype=&quot;multipart/form-data&quot;&gt;
      &lt;label for=&quot;file&quot;&gt;
        Filename:&lt;/label&gt;
      &lt;input type=&quot;file&quot; name=&quot;file&quot; id=&quot;file&quot; /&gt;
      &lt;input type=&quot;submit&quot; /&gt;
      &lt;/form&gt;

The view is using the viewmodel as its model:

    @model MHP.ViewModels.ImportDataViewModel

This will send the file to my action:

    public ActionResult AddImportFile(HttpPostedFileBase file, ImportDataViewModel importData)
        {

            if (file.ContentLength &gt; 0)
            {
                ImportDataFile idFile = new ImportDataFile { File = file };
                importData.Files.Add(idFile);
            }

            return View(&quot;DataImport&quot;, importData);
        }

This action returns the view for the DataImport page along with the viewmodel instance containing the list of files.

This works nicely up to a certain point, I can browse a file and upload it, and I can see the viewmodel data inside the action, and then also if I put a breakpoint inside the view and debug &quot;this.Model&quot;, everything is fine.

But then, if I try to upload another file, when putting a breakpoint inside the AddImportFile action, the importData parameter is empty. So the view is obviously not passing the current instance of its model to the action. 

In the MVC samples I have been through, the model instance is &quot;magically&quot; passed to the action method as a parameter, so why is it empty now?

I assume the real problem is my limited understanding of MVC, and that there is probably a very simple solution to this. Anyways, I would be extremely grateful if somebody could point me in the right direction.










ASP.Net MVC and state - how to keep state between requests

This is somewhat of a mundane question but it seems to me there is no in-built method for it in WPF. There only seems to be the `WindowState` property which being an enum does not help since i cannot tell whether the Window was in the `Normal` or `Maximized` state before being minimized.

When clicking the taskbar icon the window is being restored just as expected, assuming its prior state, but i cannot seem to find any defined method which does that.

So i have been wondering if i am just missing something or if i need to use some custom interaction logic.

(*I&#39;ll post my current solution as answer*)

How to restore a minimized Window in code-behind?

I&#39;ve successfully implemented [`onRetainNonConfigurationInstance()`][1] for my main `Activity` to save and restore certain critical components across screen orientation changes. 

But it seems, my custom views are being re-created from scratch when the orientation changes. This makes sense, although in my case it&#39;s inconvenient because the custom view in question is an X/Y plot and the plotted points are stored in the custom view. 

Is there a crafty way to implement something similar to `onRetainNonConfigurationInstance()` for a custom view, or do I need to just implement methods in the custom view which allow me to get and set its &quot;state&quot;?


  [1]: http://developer.android.com/reference/android/app/Activity.html#onRetainNonConfigurationInstance%28%29

How to prevent custom views from losing state across screen orientation changes

The official [React docs][1] state that &quot;`React.PureComponent`&#39;s `shouldComponentUpdate()` only shallowly compares the objects&quot;, and advises against this if state is &quot;deep&quot;.

Given this, is there any reason why one should prefer `React.PureComponent` when creating React components?

**Questions**:

- is there any performance impact in using `React.Component` that we may consider going for `React.PureComponent`?
- I am guessing  `shouldComponentUpdate()` of `PureComponent` performs only shallow comparisons. If this is the case, can&#39;t said method be used for deeper comparisons?
- &quot;Furthermore, `React.PureComponent`&#39;s `shouldComponentUpdate()` skips prop updates for the whole component subtree&quot; - Does this mean that prop changes are ignored?

Question arose from reading into this [medium blog][2], if it helps.

  [1]: https://reactjs.org/docs/react-api.html#reactpurecomponent
  [2]: https://medium.com/modus-create-front-end-development/component-rendering-performance-in-react-df859b474adc#.d02ak0fwb

React.Component vs React.PureComponent

I want to persist some parts of my state tree to the localStorage. What is the appropriate place to do so? Reducer or action?

Where to write to localStorage in a Redux app?

I know that React may perform state updates asynchronously and in batch for performance optimization. Therefore you can never trust the state to be updated after having called `setState`. But can you trust React to **update the state in the same order as `setState` is called** for

 1. the same component?
 2. different components?

Consider clicking the button in the following examples:

**1.** Is there ever a possibility that **a is false and b is true** for:

    class Container extends React.Component {
      constructor(props) {
        super(props);
        this.state = { a: false, b: false };
      }
    
      render() {
        return &lt;Button onClick={this.handleClick}/&gt;
      }
    
      handleClick = () =&gt; {
        this.setState({ a: true });
        this.setState({ b: true });
      }
    }

**2.** Is there ever a possibility that **a is false and b is true** for:

    class SuperContainer extends React.Component {
      constructor(props) {
        super(props);
        this.state = { a: false };
      }
    
      render() {
        return &lt;Container setParentState={this.setState.bind(this)}/&gt;
      }
    }
    
    class Container extends React.Component {
      constructor(props) {
        super(props);
        this.state = { b: false };
      }
    
      render() {
        return &lt;Button onClick={this.handleClick}/&gt;
      }
    
      handleClick = () =&gt; {
        this.props.setParentState({ a: true });
        this.setState({ b: true });
      }
    }

Keep in mind that these are extreme simplifications of my use case. I realize that I can do this differently, e.g. updating both state params at the same time in example 1, as well as performing the second state update in a callback to the first state update in example 2. However, this is not my question, and I am only interested in if there is a well defined way that React performs these state updates, nothing else.

Any answer backed up by documentation is greatly appreciated.

Does React keep the order for state updates?

Is there a way of completely removing the styling of a button in Internet Explorer? I use a css sprite for my button, and everything looks ok. 

But when I click the button, it moves to the top a little, it makes it look out of shape. Is there a css click state, or mousedown? I don&#39;t know what triggers that state.

I know it&#39;s not a really big deal, but sometimes it&#39;s the small things that matter.

Remove the complete styling of an HTML button/submit

My app uses the Firebase API for User Authentication, saving the Login status as a boolean value in a Vuex State.

When the user logs in I set the **login status** and conditionally display the Login/Logout button accordingly.

But when the​ page is refreshed, the state of the vue app is lost and reset to default

This causes a problem as even when the user is logged in and the page is refreshed the **login status** is set back to **false** and the login button is displayed instead of logout button even though the user stays logged in....

**What shall I do to prevent this behavior**

Shall I use **cookies**
Or any other better solution is available...

 - 




Vuex state on page refresh

So I have this:

&lt;!-- language: lang-js --&gt;

	let total = newDealersDeckTotal.reduce(function(a, b) {
	  return a + b;
	},
	0);
	
	console.log(total, &#39;tittal&#39;); //outputs correct total
	setTimeout(() =&gt; {
	  this.setState({ dealersOverallTotal: total });
	}, 10);
	
	console.log(this.state.dealersOverallTotal, &#39;dealersOverallTotal1&#39;); //outputs incorrect total

`newDealersDeckTotal` is just an array of numbers `[1, 5, 9]` e.g.
however `this.state.dealersOverallTotal` does not give the correct total but `total` does? I even put in a timeout delay to see if this solved the problem.
any obvious or should I post more code?



React setState not updating state

For instance, the default button has the following dependencies between its states and background images:

    &lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
    &lt;selector xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;&gt;
        &lt;item android:state_window_focused=&quot;false&quot; android:state_enabled=&quot;true&quot;
            android:drawable=&quot;@drawable/btn_default_normal&quot; /&gt;
        &lt;item android:state_window_focused=&quot;false&quot; android:state_enabled=&quot;false&quot;
            android:drawable=&quot;@drawable/btn_default_normal_disable&quot; /&gt;
        &lt;item android:state_pressed=&quot;true&quot; 
            android:drawable=&quot;@drawable/btn_default_pressed&quot; /&gt;
        &lt;item android:state_focused=&quot;true&quot; android:state_enabled=&quot;true&quot;
            android:drawable=&quot;@drawable/btn_default_selected&quot; /&gt;
        &lt;item android:state_enabled=&quot;true&quot;
            android:drawable=&quot;@drawable/btn_default_normal&quot; /&gt;
        &lt;item android:state_focused=&quot;true&quot;
            android:drawable=&quot;@drawable/btn_default_normal_disable_focused&quot; /&gt;
        &lt;item
            android:drawable=&quot;@drawable/btn_default_normal_disable&quot; /&gt;
    &lt;/selector&gt;

How can I define my own custom state (smth like `android:state_custom`), so then I could use it to dynamically change my button visual appearance?

How to add a custom button state

I am facing this problem of passing data between two states without exposing the data in the url, it&#39;s like user cannot really directly land on this state.

For example.
I have two states &quot;A&quot; and &quot;B&quot;.
I am doing some server call in state &quot;A&quot; and passing the response of the call
to state &quot;B&quot;. The response of the server call is a string message, which is quite long, so i cannot expose that in the url.

So is there any way in angular ui router to pass data between states, without using url params ?

AngularJS ui router passing data between states without URL

I&#39;ve recently been learning about functional programming (specifically Haskell, but I&#39;ve gone through tutorials on Lisp and Erlang as well). While I found the concepts very enlightening, I still don&#39;t see the practical side of  the &quot;no side effects&quot; concept. What are the practical advantages of it? I&#39;m trying to think in the functional mindset, but there are some situations that just seem overly complex without the ability to save state in an easy way (I don&#39;t consider Haskell&#39;s monads &#39;easy&#39;).

Is it worth continuing to learn Haskell (or another purely functional language) in-depth? Is functional or stateless programming actually more productive than procedural? Is it likely that I will continue to use Haskell or another functional language later, or should I learn it only for the understanding?

I care less about performance than productivity. So I&#39;m mainly asking if I will be more productive in a functional language than a procedural/object-oriented/whatever.

Advantages of stateless programming?

Here&#39;s my situation:

* on this.handleFormSubmit() I am executing this.setState()
* inside this.handleFormSubmit(), I am calling this.findRoutes(); - which depends on the successful completion of this.setState()
* this.setState(); does not complete before this.findRoutes is called...
* **How do I wait for this.setState() inside of this.handleFormSubmit() to finish before calling this.findRoutes()?**

A subpar solution:

* putting this.findRoutes() in componentDidUpdate()
* this is not acceptable because there will be more state changes unrelated the findRoutes() function. I don&#39;t want to trigger the findRoutes() function when unrelated state is updated.

Please see code snippet below:

    handleFormSubmit: function(input){
    				// Form Input
    				this.setState({
    					originId: input.originId,
    					destinationId: input.destinationId,
    					radius: input.radius,
    					search: input.search
    				})
    				this.findRoutes();
    			},
    			handleMapRender: function(map){
    				// Intialized Google Map
    				directionsDisplay = new google.maps.DirectionsRenderer();
    				directionsService = new google.maps.DirectionsService();
    				this.setState({map: map});
    				placesService = new google.maps.places.PlacesService(map);
    				directionsDisplay.setMap(map);
    			},
    			findRoutes: function(){
    				var me = this;
    				if (!this.state.originId || !this.state.destinationId) {
    					alert(&quot;findRoutes!&quot;);
    					return;
    				}
    				var p1 = new Promise(function(resolve, reject) {
    					directionsService.route({
    						origin: {&#39;placeId&#39;: me.state.originId},
    						destination: {&#39;placeId&#39;: me.state.destinationId},
    						travelMode: me.state.travelMode
    					}, function(response, status){
    						if (status === google.maps.DirectionsStatus.OK) {
    							// me.response = response;
    							directionsDisplay.setDirections(response);
    							resolve(response);
    						} else {
    							window.alert(&#39;Directions config failed due to &#39; + status);
    						}
    					});
    				});
    				return p1
    			},
    			render: function() {
    				return (
    					&lt;div className=&quot;MapControl&quot;&gt;
    						&lt;h1&gt;Search&lt;/h1&gt;
    						&lt;MapForm
    							onFormSubmit={this.handleFormSubmit}
    							map={this.state.map}/&gt;
    						&lt;GMap
    							setMapState={this.handleMapRender}
    							originId= {this.state.originId}
    							destinationId= {this.state.destinationId}
    							radius= {this.state.radius}
    							search= {this.state.search}/&gt;
    					&lt;/div&gt;
    				);
    			}
    		});



React.js, wait for setState to finish before triggering a function?

Am I missing something or do `Fragment`s not have a `onRestoreInstanceState()` method? If not, how do I go about attaining something similar?

android fragment onRestoreInstanceState

I have a question about Android&#39;s [RecyclerView.State][1].

I am using a RecyclerView, how could I use and bind it with RecyclerView.State?

My purpose is to **save the RecyclerView&#39;s scroll position**.

  [1]: http://developer.android.com/reference/android/support/v7/widget/RecyclerView.State.html

How to save RecyclerView&#39;s scroll position using RecyclerView.State?

I am creating an application which requires login. I created the main and the login activity.

In the main activity `onCreate` method I added the following condition:

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        ...
        
        loadSettings();
        if(strSessionString == null)
        {
        	login();
        }
        ...
    }

The `onActivityResult` method which is executed when the login form terminates looks like this:

    @Override
    public void onActivityResult(int requestCode,
    							 int resultCode,
    							 Intent data)
    {
    	super.onActivityResult(requestCode, resultCode, data);
    	switch(requestCode)
    	{
    		case(SHOW_SUBACTICITY_LOGIN):
    		{
    			if(resultCode == Activity.RESULT_OK)
    			{
    				
    				strSessionString = data.getStringExtra(Login.SESSIONSTRING);
    				connectionAvailable = true;
    				strUsername = data.getStringExtra(Login.USERNAME);
    			}
    		}
    	}

The problem is the login form sometimes appears twice (the `login()` method is called twice) and also when the phone keyboard slides the login form appears again and I guess the problem is the variable `strSessionString`.

Does anyone know how to set the variable global in order to avoid login form appearing after the user already successfully authenticates?

How to declare global variables in Android?

I&#39;m still fairly new at React, but I&#39;ve been grinding along slowly and I&#39;ve encountered something I&#39;m stuck on. 

I am trying to build a &quot;timer&quot; component in React, and to be honest I don&#39;t know if I&#39;m doing this right (or efficiently). In my code below, I set the state to return an object ```{ currentCount: 10 }``` and have been toying with ```componentDidMount```, ```componentWillUnmount```, and ```render``` and I can only get the state to &quot;count down&quot; from 10 to 9. 

Two-part question: What am I getting wrong? And, is there a more efficient way of going about using setTimeout (rather than using ```componentDidMount``` &amp; ```componentWillUnmount```)?

Thank you in advance.

    import React from &#39;react&#39;;
    
    var Clock = React.createClass({
    
      getInitialState: function() {
        return { currentCount: 10 };
      },
    
      componentDidMount: function() {
        this.countdown = setInterval(this.timer, 1000);
      },
    
      componentWillUnmount: function() {
        clearInterval(this.countdown);
      },
    
      timer: function() {
        this.setState({ currentCount: 10 });
      },
    
      render: function() {
        var displayCount = this.state.currentCount--;
        return (
          &lt;section&gt;
            {displayCount}
          &lt;/section&gt;
        );
      }
    
    });
    
    module.exports = Clock;

setInterval in a React app

 1. For Example in the below code plus button works and able to update
   the text but the minus button does not.
 2. But if we press FloatingActionButton then the State is refreshed .
 3. The minus button is changing the value of the variable but not
   updating the state of parent widget .



[![enter image description here][1]][1] 

here is code .....



    import &#39;package:flutter/material.dart&#39;;
    
    void main() =&gt; runApp(new MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return new MaterialApp(
          title: &#39;Flutter Demo&#39;,
          theme: new ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: new MyHomePage(title: &#39;Flutter Demo Home Page&#39;),
        );
      }
    }
    
    int number;
    
    EdgeInsets globalMargin = const EdgeInsets.symmetric(horizontal: 20.0, vertical: 20.0);
    TextStyle textStyle = const TextStyle(
      fontSize: 100.0,
      color: Colors.black,
    );
    
    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);
    
      final String title;
    
      @override
      _MyHomePageState createState() =&gt; new _MyHomePageState();
    }
    
    class _MyHomePageState extends State&lt;MyHomePage&gt; {
      @override
      void initState() {
        super.initState();
        number = number ?? 0;
      }
    
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          appBar: new AppBar(
            title: new Text(widget.title),
          ),
          body: new Column(
            children: &lt;Widget&gt;[
              new Text(
                number.toString(),
                style: textStyle,
              ),
              new GridView.count(
                crossAxisCount: 2,
                shrinkWrap: true,
                scrollDirection: Axis.vertical,
                children: &lt;Widget&gt;[
                  new InkResponse(
                    child: new Container(
                        margin: globalMargin,
                        color: Colors.green,
                        child: new Center(
                          child: new Text(
                            &quot;+&quot;,
                            style: textStyle,
                          ),
                        )),
                    onTap: () {
                      setState(() {
                        number = number + 1;
                      });
                    },
                  ),
                  new Sub(),
                ],
              ),
            ],
          ),
          floatingActionButton: new FloatingActionButton(
            onPressed: () {
              setState(() {});
            },
            child: new Icon(Icons.update),
          ),
        );
      }
    }
    
    class Sub extends StatefulWidget {
      @override
      _SubState createState() =&gt; new _SubState();
    }
    
    class _SubState extends State&lt;Sub&gt; {
      @override
      Widget build(BuildContext context) {
        return new InkResponse(
          child: new Container(
              margin: globalMargin,
              color: Colors.red,
              child: new Center(
                child: new Text(
                  &quot;-&quot;,
                  style: textStyle,
                ),
              )),
          onTap: () {
            setState(() {
              number = number - 1;
            });
          },
        );
      }
    }

  [1]: https://i.stack.imgur.com/7SWW2m.png




How to Set/Update State of StatefulWidget from other StatefulWidget in Flutter?

I&#39;ve written a game of tic-tac-toe in Java, and my current method of determining the end of the game accounts for the following possible scenarios for the game being over:

 1. The board is full, and no winner has yet been declared: Game is a draw.
 2. Cross has won.
 3. Circle has won.

Unfortunately, to do so, it reads through a predefined set of these scenarios from a table. This isn&#39;t necessarily bad considering that there are only 9 spaces on a board, and thus the table is somewhat small, but is there a better algorithmic way of determining if the game is over? The determination of whether someone has won or not is the meat of the problem, since checking if 9 spaces are full is trivial. 

The table method might be the solution, but if not, what is? Also, what if the board were not size `n=9`? What if it were a much larger board, say `n=16`, `n=25`, and so on, causing the number of consecutively placed items to win to be `x=4`, `x=5`, etc? A general algorithm to use for all `n = { 9, 16, 25, 36 ... }`?

Algorithm for Determining Tic Tac Toe Game Over

I&#39;m working on a todo application. This is a very simplified version of the offending code. I have a checkbox:

     &lt;p&gt;&lt;input type=&quot;checkbox&quot;  name=&quot;area&quot; checked={this.state.Pencil}   onChange={this.checkPencil}/&gt; Writing Item &lt;/p&gt;

Here&#39;s the function that calls the checkbox:

    checkPencil(){
       this.setState({
          pencil:!this.state.pencil,
      }); 
      this.props.updateItem(this.state);
    }

updateItem is a function that&#39;s mapped to dispatch to redux

    function mapDispatchToProps(dispatch){
      return bindActionCreators({ updateItem}, dispatch);
    }

My problem is that when I call the updateItem action and console.log the state, it is always 1 step behind. If the checkbox is unchecked and not true, I still get the state of true being passed to the updateItem function. Do I need to call another function to force the state to update? 



React setState not Updating Immediately

In my react component im trying to implement a simple spinner while an ajax request is in progress - im using state to store the loading status. 
 
For some reason this piece of code below in my React component throws this error 

&gt; Can only update a mounted or mounting component. This usually means
&gt; you called setState() on an unmounted component. This is a no-op.
&gt; Please check the code for the undefined component.

If I get rid of the first setState call the error goes away.

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-js --&gt;

    constructor(props) {
      super(props);
      this.loadSearches = this.loadSearches.bind(this);

      this.state = {
        loading: false
      }
    }

    loadSearches() {

      this.setState({
        loading: true,
        searches: []
      });

      console.log(&#39;Loading Searches..&#39;);

      $.ajax({
        url: this.props.source + &#39;?projectId=&#39; + this.props.projectId,
        dataType: &#39;json&#39;,
        crossDomain: true,
        success: function(data) {
          this.setState({
            loading: false
          });
        }.bind(this),
        error: function(xhr, status, err) {
          console.error(this.props.url, status, err.toString());
          this.setState({
            loading: false
          });
        }.bind(this)
      });
    }

    componentDidMount() {
      setInterval(this.loadSearches, this.props.pollInterval);
    }

    render() {

        let searches = this.state.searches || [];


        return (&lt;div&gt;
              &lt;Table striped bordered condensed hover&gt;
              &lt;thead&gt;
                &lt;tr&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;Submit Date&lt;/th&gt;
                  &lt;th&gt;Dataset &amp;amp; Datatype&lt;/th&gt;
                  &lt;th&gt;Results&lt;/th&gt;
                  &lt;th&gt;Last Downloaded&lt;/th&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
              {
              searches.map(function(search) {

                    let createdDate = moment(search.createdDate, &#39;X&#39;).format(&quot;YYYY-MM-DD&quot;);
                    let downloadedDate = moment(search.downloadedDate, &#39;X&#39;).format(&quot;YYYY-MM-DD&quot;);
                    let records = 0;
                    let status = search.status ? search.status.toLowerCase() : &#39;&#39;

                    return (
                    &lt;tbody key={search.id}&gt;
                      &lt;tr&gt;
                        &lt;td&gt;{search.name}&lt;/td&gt;
                        &lt;td&gt;{createdDate}&lt;/td&gt;
                        &lt;td&gt;{search.dataset}&lt;/td&gt;
                        &lt;td&gt;{records}&lt;/td&gt;
                        &lt;td&gt;{downloadedDate}&lt;/td&gt;
                      &lt;/tr&gt;
                    &lt;/tbody&gt;
                  );
              }
              &lt;/Table &gt;
              &lt;/div&gt;
          );
      }

&lt;!-- end snippet --&gt;

The question is why am I getting this error when the component should already be mounted (as its being called from componentDidMount) I thought it was safe to set state once the component is mounted ?

React - setState() on unmounted component

So I started learning React a week ago and I inevitably got to the problem of state and how components are supposed to communicate with the rest of the app. I searched around and Redux seems to be the flavor of the month. I read through all the documentation and I think it&#39;s actually a pretty revolutionary idea. Here are my thoughts on it:

State is generally agreed to be pretty evil and a large source of bugs in programming. Instead of scattering it all throughout your app Redux says why not just have it all concentrated in a global state tree that you have to emit actions to change? Sounds interesting. All programs need state so let&#39;s stick it in one impure space and only modify it from within there so bugs are easy to track down. Then we can also declaratively bind individual state pieces to React components and have them auto-redraw and everything is beautiful.

However, I have two questions about this whole design. For one, why does the state tree need to be immutable? Say I don&#39;t care about time travel debugging, hot reload, and have already implemented undo/redo in my app. It just seems so cumbersome to have to do this:

    case COMPLETE_TODO:
      return [
        ...state.slice(0, action.index),
        Object.assign({}, state[action.index], {
          completed: true
        }),
        ...state.slice(action.index + 1)
      ];

Instead of this:

    case COMPLETE_TODO:
      state[action.index].completed = true;
        
Not to mention I am making an online whiteboard just to learn and every state change might be as simple as adding a brush stroke to the command list. After a while (hundreds of brush strokes) duplicating this entire array might start becoming extremely expensive and time-consuming.

I&#39;m ok with a global state tree that is independent from the UI that is mutated via actions, but does it really need to be immutable? What&#39;s wrong with a simple implementation like this (very rough draft. wrote in 1 minute)?

    var store = { items: [] };

    export function getState() {
      return store;
    }

    export function addTodo(text) {
      store.items.push({ &quot;text&quot;: text, &quot;completed&quot;, false});
    }

    export function completeTodo(index) {
      store.items[index].completed = true;
    }

It&#39;s still a global state tree mutated via actions emitted but extremely simple and efficient.

Isn&#39;t Redux just glorified global state?

I have an array in state, let&#39;s say this.state.arr.
I want to add something to this state property, and then change some more properties.

Option 1

    onChange(event){
        this.state.arr.push(&#39;newvalue&#39;);
        ...
        this.setState({some:&#39;val&#39;,arr:this.state.arr})
    }

Option 2

    onChange(event){
        var newArr = this.state.arr;
        ...
        newArr.push(&#39;newvalue&#39;);
        ...
        this.setState({some:&#39;val&#39;,arr:newArr})
    }


So.. I know this.state is supposed to be treated immutable. But is it ok to use it like in option 1 where I still set the state from it, or do I need to go with something like option 2, and thus always first making a copy in memory 

What is the best way to add a value to an array in state

I am trying to save a cache dictionary in my `flask` application.

As far as I understand it, the [Application Context](http://flask.pocoo.org/docs/appcontext/), in particular the [flask.g object](http://flask.pocoo.org/docs/api/#application-globals) should be used for this.

&lt;!-- language-all: python --&gt;

Setup:

    import flask as f
    
    app = f.Flask(__name__)

Now if I do:

    with app.app_context():
        f.g.foo = &quot;bar&quot;
        print f.g.foo

It prints `bar`.

Continuing with the following:

    with app.app_context():
        print f.g.foo

    AttributeError: &#39;_AppCtxGlobals&#39; object has no attribute &#39;foo&#39;

I don’t understand it and the docs are not helping at all. If I read them correctly the state should have been preserved.

**Another idea** I had was to simply use module-wide variables:

    cache = {}

    def some_function():
        cache[&#39;foo&#39;] = &quot;bar&quot;

But it seems like these get reset with every request.

How to do this correctly?

**Edit:** Flask 10.1

Preserving global state in a flask application

Is it at all possible to update object&#39;s properties with `setState`?

Something like:

    this.state = {
       jasper: { name: &#39;jasper&#39;, age: 28 },
    }

I have tried: 

    this.setState({jasper.name: &#39;someOtherName&#39;});

and this:

    this.setState({jasper: {name: &#39;someothername&#39;}})

The first results in a syntax error and the second just does nothing. Any ideas?




Updating an object with setState in React

I&#39;m creating an app where the user can design his own form. E.g. specify name of the field and details of which other columns that should be included.

The component is available as a JSFiddle [here][1].
 
My initial state looks like this:

    var DynamicForm = React.createClass({
      getInitialState: function() {
       var items = {};
       items[1] = { name: &#39;field 1&#39;, populate_at: &#39;web_start&#39;,
                    same_as: &#39;customer_name&#39;,
                    autocomplete_from: &#39;customer_name&#39;, title: &#39;&#39; };
       items[2] = { name: &#39;field 2&#39;, populate_at: &#39;web_end&#39;,
                    same_as: &#39;user_name&#39;, 
                        autocomplete_from: &#39;user_name&#39;, title: &#39;&#39; };
    
         return { items };
       },
    
      render: function() {
         var _this = this;
         return (
           &lt;div&gt;
             { Object.keys(this.state.items).map(function (key) {
               var item = _this.state.items[key];
               return (
                 &lt;div&gt;
                   &lt;PopulateAtCheckboxes this={this}
                     checked={item.populate_at} id={key} 
                       populate_at={data.populate_at} /&gt;
                &lt;/div&gt;
                );
            }, this)}
            &lt;button onClick={this.newFieldEntry}&gt;Create a new field&lt;/button&gt;
            &lt;button onClick={this.saveAndContinue}&gt;Save and Continue&lt;/button&gt;
          &lt;/div&gt;
        );
      }

I want to update the state when the user changes any of the values, but I&#39;m having a hard time to target the correct object:

    var PopulateAtCheckboxes = React.createClass({
      handleChange: function (e) {
         item = this.state.items[1];
         item.name = &#39;newName&#39;;
         items[1] = item;
         this.setState({items: items});
      },
      render: function() {
        var populateAtCheckbox = this.props.populate_at.map(function(value) {
          return (
            &lt;label for={value}&gt;
              &lt;input type=&quot;radio&quot; name={&#39;populate_at&#39;+this.props.id} value={value}
                onChange={this.handleChange} checked={this.props.checked == value}
                ref=&quot;populate-at&quot;/&gt;
              {value}
            &lt;/label&gt;
          );
        }, this);
        return (
          &lt;div className=&quot;populate-at-checkboxes&quot;&gt;
            {populateAtCheckbox}
          &lt;/div&gt;
        );
      }
    });

How should I craft `this.setState` to get it to update `items[1].name` ?


  [1]: http://jsfiddle.net/stabenfeldt/98dhz3e6/5

React: how to update state.item[1] in state using setState?

I&#39;ve be fiddling around with ui-router today in trying to better understand the scaffolding in Ionic and one thing that I noticed was that they give the abstracted state of &quot;tabs&quot; a url. 

The only times I&#39;ve ever used abstract states, I used an empty string as the url and I notice that if I&#39;ve ever accidentally attempted to navigate to an abstracted state (as opposed to the child state) I get the error: 

&gt; *Cannot transition to abstract state &#39;[insertAbstractStateHere]&#39;*

**edit:** 

&quot;Moreover, in experimenting, when I try to assign a url to my abstract state (outside of Ionic) and still render the nested state views, I get a big goose egg. Nothing shows up at all.&quot;

the above quoted statement is false! I tried it again in [Plunker][1] and the nested states did show up. 

   
     angular.module(&#39;routingExperiments&#39;, [&#39;ui.router&#39;])
          .config(function($urlRouterProvider, $stateProvider) {
    
        $stateProvider
    
          .state(&#39;abstractExperiment&#39;, {
            abstract: true,
            url: &#39;&#39;, //&lt;--- seems as if any string can go here.
            templateUrl: &#39;abstractExperiment.html&#39;
          })
          .state(&#39;abstractExperiment.test1&#39;, {
            url: &#39;/test1&#39;,
            templateUrl: &#39;abstractTest1.html&#39;
          });
      });

Apparently I was indeed doing it wrong. So my new question is:

Is there any reason why one would use a named state as opposed to an empty string in employing abstract states, or is it just a style choice? 


  [1]: http://plnkr.co/edit/KnMuiEsVAjviz4n6xyuj?p=preview

Why give an &quot;abstract: true&quot; state a url?

I&#39;m finding Angular&#39;s use of models confusing. Angular seems to take the approach that a model can be anything you like - I.E. Angular does not include an explicit model class and you can use vanilla JavaScript objects as models.

In almost every Angular example I&#39;ve seen, the model is effectively an object, either created by hand, or returned from an API call via a Resource. Because almost every Angular example I&#39;ve looked at is simple, usually the model data stored on $scope in a controller and any state related to the model, for example selection, is also stored on the $scope in the controller. This works fine for simple apps/examples, but this seems like an oversimplification when apps become more complex. Model state stored in a controller is at risk of becoming contextual and being lost if the context changes, for example; A Controller storing `selectedGallery` and `selectedPhoto` can only store global `selectedImage`, not a `selectedPhoto` per gallery. In such a situation, using a controller per gallery might negate this problem, but would seem wasteful and probably inappropriate and unnecessary from a UI perspective.

Angular&#39;s definition of models seems closer to what I would consider a VO/DTO that is a dumb object passed between server and client. My instinct is to wrap such an object in what I would consider a Model - a class that maintains state relating to the DTO/VO (such as selection), offers mutators as needed to manipulate the DTO/VO, and notifies the rest of the application of changes to the underlying data. Obviously this last part is nicely taken care of by Angular&#39;s bindings, but I still see a strong use-case for the first two responsibilities.

However I haven&#39;t really seen this pattern used in the examples I&#39;ve looked at, but neither have I seen what I would consider a scalable alternative. Angular seems to implicitly discourage using Services as models by enforcing Singletons (I know there are ways to get around this, but they don&#39;t seem widely used or approved of).

So how should I be keeping state on Model data?

[Edit] The second answer in [this question][1] is interesting and close to what I&#39;m currently using.


  [1]: https://stackoverflow.com/questions/11112608/angularjs-where-to-put-model-data-and-behaviour?rq=1

Where Should Model State Be Stored In Angular.js

This probably seems like a duplicate, since there are identical questions out there.

Unfortunately all of the answers to all of these questions are missing one detail: **the states**.

Where can I get a list of countries, **states** and cities?

For example, I want this:

    | Sydney  |  New South Wales  |  Australia  |

or

    |  Miami  |  Florida          |  United States  |

I **don&#39;t** want something like this, which excludes the state:

    |  Miami  |  United States  |

Is there any place where I can get this kind of data?

I&#39;ve already tried the following data sources:

  * http://www.maxmind.com/app/csv
  * http://www.geodatasource.com/world-cities-database/free
  * http://developer.yahoo.com/geo/geoplanet/data/

But all of them exclude the **states**.

Where can I get a list of Countries, States and Cities?

I&#39;ve read a dozen of times now that the state object could exists of multiple key|value pairs and that it is associated with the new history entry.
But could someone please give me an example of the benefits of the state object? Whats the practical use of it? I can&#39;t imagine why not just typing in {}

pushState: what exactly is the state object for?

For the purpose of introspection, sometimes I&#39;ve wanted to automatically assign serial numbers to types, or something similar.

Unfortunately, template metaprogramming is essentially a functional language, and as such lacks global variables or modifiable state which would implement such a counter.

Or does it?

---

Example code by request:

    #include &lt;iostream&gt;
    
    int const a = counter_read;
    counter_inc;
    counter_inc;
    counter_inc;
    counter_inc;
    counter_inc;
    
    int const b = counter_read;
    
    int main() {
        std::cout &lt;&lt; a &lt;&lt; &#39; &#39; &lt;&lt; b &lt;&lt; &#39;\n&#39;; // print &quot;0 5&quot;
        
        counter_inc_t();
        counter_inc_t();
        counter_inc_t();
        
        std::cout &lt;&lt; counter_read &lt;&lt; &#39;\n&#39;; // print &quot;8&quot;
        
        struct {
            counter_inc_t d1;
            char x[ counter_read ];
            counter_inc_t d2;
            char y[ counter_read ];
        } ls;
        
        std::cout &lt;&lt; sizeof ls.x &lt;&lt; &#39; &#39; &lt;&lt; sizeof ls.y &lt;&lt; &#39;\n&#39;; // print &quot;9 10&quot;
    }


Does C++ support compile-time counters?

I am quite new to React and after going through some tutorials, I was trying the below code of mine. 

I made one component, passed props to it from a store, on `componentWillMount` I make a new state for component. Rendering is fine till now.

Next I bound my `state` to value of an input box and I have `onChange` listener as well. Still, I can&#39;t change my values in the field.

Since, I am from Angular background, I am assuming binding input&#39;s value to state like below will automatically update the property `name` in `state` object. Am I wrong here?

        
    componentWillMount(){
        this.setState({
    	    updatable : false,
        	name : this.props.name,
        	status : this.props.status
        });
    }

    //relevant DOM from component&#39;s render function
    &lt;input className=&quot;form-control&quot; type=&quot;text&quot; value={this.state.name} id={&#39;todoName&#39; + this.props.id} onChange={this.onTodoChange.bind(this)}/&gt;
    
    onTodoChange(){
        console.log(this);
        //consoling &#39;this&#39; here, shows old values only.
        //not sure how and even if I need to update state here.
        // Do I need to pass new state to this function from DOM
        //TODO: send new data to store
    }

My `onTodoChange` function console the value of `this` which has same value of state as while initializing. How do I go about changing state by typing in input boxes, so that I can send them to the stores?

Why can&#39;t I change my input value in React even with the onChange listener

    enum SectionType: String, CaseIterable {
        case top = &quot;Top&quot;
        case best = &quot;Best&quot;
    }

    struct ContentView : View {
        @State private var selection: Int = 0
        
        var body: some View {
            SegmentedControl(selection: $selection) {
                ForEach(SectionType.allCases.identified(by: \.self)) { type in
                    Text(type.rawValue).tag(type)
                }
            }
        }
    }

How do I run code (e.g `print(&quot;Selection changed to \(selection)&quot;)` when the `$selection` state changes? I looked through the docs and I couldn&#39;t find anything.

How can I run an action when a state changes?

Suppose you&#39;re building a fairly large simulation in Haskell. There are many different types of entities whose attributes update as the simulation progresses. Let&#39;s say, for the sake of example, that your entities are called Monkeys, Elephants, Bears, etc..

What is your preferred method for maintaining these entities&#39; states?

The first and most obvious approach I thought of was this:

    mainLoop :: [Monkey] -&gt; [Elephant] -&gt; [Bear] -&gt; String
    mainLoop monkeys elephants bears =
      let monkeys&#39;   = updateMonkeys   monkeys
          elephants&#39; = updateElephants elephants
          bears&#39;     = updateBears     bears
      in
        if shouldExit monkeys elephants bears then &quot;Done&quot; else
          mainLoop monkeys&#39; elephants&#39; bears&#39;

It&#39;s already ugly having each type of entity explicitly mentioned in the `mainLoop` function signature. You can imagine how it would get absolutely awful if you had, say, 20 types of entities. (20 is not unreasonable for complex simulations.) So I think this is an unacceptable approach. But its saving grace is that functions like `updateMonkeys` are very explicit in what they do: They take a list of Monkeys and return a new one.

So then the next thought would be to roll everything into one big data structure that holds all state, thus cleaning up the signature of `mainLoop`:

    mainLoop :: GameState -&gt; String
    mainLoop gs0 =
      let gs1 = updateMonkeys   gs0
          gs2 = updateElephants gs1
          gs3 = updateBears     gs2
      in
        if shouldExit gs0 then &quot;Done&quot; else
          mainLoop gs3

Some would suggest that we wrap `GameState` up in a State Monad and call `updateMonkeys` etc. in a `do`. That&#39;s fine. Some would rather suggest we clean it up with function composition. Also fine, I think. (BTW, I&#39;m a novice with Haskell, so maybe I&#39;m wrong about some of this.)

But then the problem is, functions like `updateMonkeys` don&#39;t give you useful information from their type signature. You can&#39;t really be sure what they do. Sure, `updateMonkeys` is a descriptive name, but that&#39;s little consolation. When I pass in a [god object](http://en.wikipedia.org/wiki/God_object) and say &quot;please update my global state,&quot; I feel like we&#39;re back in the imperative world. It feels like global variables by another name: You have a function that does *something* to the global state, you call it, and you hope for the best. (I suppose you still avoid some concurrency problems that would be present with global variables in an imperative program. But meh, concurrency isn&#39;t nearly the only thing wrong with global variables.)

A further problem is this: Suppose the objects need to interact. For example, we have a function like this:

    stomp :: Elephant -&gt; Monkey -&gt; (Elephant, Monkey)
    stomp elephant monkey =
      (elongateEvilGrin elephant, decrementHealth monkey)

Say this gets called in `updateElephants`, because that&#39;s where we check to see if any of the elephants are in stomping range of any monkeys. How do you elegantly propagate the changes to both the monkeys and elephants in this scenario? In our second example, `updateElephants` takes and returns a god object, so it could effect both changes. But this just muddies the waters further and reinforces my point: With the god object, you&#39;re effectively just mutating global variables. And if you&#39;re not using the god object, I&#39;m not sure how you&#39;d propagate those types of changes.

What to do? Surely many programs need to manage complex state, so I&#39;m guessing there are some well-known approaches to this problem.

Just for the sake of comparison, here&#39;s how I might solve the problem in the OOP world. There would be `Monkey`, `Elephant`, etc. objects. I&#39;d probably have class methods to do lookups in the set of all live animals. Maybe you could lookup by location, by ID, whatever. Thanks to the data structures underlying the lookup functions, they&#39;d stay allocated on the heap. (I&#39;m assuming GC or reference counting.) Their member variables would get mutated all the time. Any method of any class would be able to mutate any live animal of any other class. E.g. an `Elephant` could have a `stomp` method that would decrement the health of a passed-in `Monkey` object, and there would be no need to pass that

Likewise, in an Erlang or other actor-oriented design, you could solve these problems fairly elegantly: Each actor maintains its own loop and thus its own state, so you never need a god object. And message passing allows one object&#39;s activities to trigger changes in other objects without passing a bunch of stuff all the way back up the call stack. Yet I have heard it said that actors in Haskell are frowned upon.

Maintaining complex state in Haskell

Let me preface this by saying I am a novice to ReactJS. I am trying to learn by making a simple site that populates data using React. I have a JSON file that contains link data that will be looped through with map. 

I have tried setting it as the components state then passing it to the navbar links via a prop but I am getting &quot;Uncaught TypeError: Cannot read property &#39;data&#39; of null&quot;

I tried to look around for solutions but could not find anything.


Note: When I try to hard code an object and map through it that way it returns map is undefined. However I am not sure that is directly related to the setState error.

    /** @jsx React.DOM */
    
    var conf = {
        companyName: &quot;Slant Hosting&quot;
      };
    
    var NavbarLinks = React.createClass({
      render: function(){
        var navLinks = this.props.data.map(function(link){
          return(
            &lt;li&gt;&lt;a href={link.target}&gt;{link.text}&lt;/a&gt;&lt;/li&gt;
          );
        });
        return(
          &lt;ul className=&quot;nav navbar-nav&quot;&gt;
            {navLinks}
          &lt;/ul&gt;
        )
      }
    });
    
    var NavbarBrand = React.createClass({
      render: function(){
        return(
          &lt;a className=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;{conf.companyName}&lt;/a&gt;
        );
      }
    });
    
    var Navbar = React.createClass({
      getInitalState: function(){
        return{
          data : []
        };
      },
      loadNavbarJSON: function() {
        $.ajax({
          url: &quot;app/js/configs/navbar.json&quot;,
          dataType: &#39;json&#39;,
          success: function(data) {
            this.setState({
              data: data
            });
            console.log(data);
            console.log(this.state.data);
          }.bind(this),
          error: function(xhr, status, err) {
            console.error(this.props.url, status, err.toString());
          }.bind(this)
        });
      },
      componentDidMount: function(){
        this.loadNavbarJSON();
      },
      render: function(){
        return(
          &lt;nav className=&quot;navbar navbar-default navbar-fixed-top&quot; role=&quot;navigation&quot;&gt;
            &lt;div className=&quot;container-fluid&quot;&gt;
              &lt;div className=&quot;navbar-header&quot;&gt;
                &lt;NavbarBrand /&gt;
              &lt;/div&gt;
              &lt;NavbarLinks data={this.state.data} /&gt;
            &lt;/div&gt;
          &lt;/nav&gt;
        );
      }
    });
    
    var Header = React.createClass({
      render: function(){
        return(
          &lt;Navbar /&gt;
        );
      }
    });
    
    React.renderComponent(
      &lt;Header /&gt;,
      document.getElementById(&#39;render&#39;)
    );


ReactJS this.state null

One thing that has always confused me is whether or not it&#39;s an okay time to use an IORef. Are there any guidelines that should be followed when deciding whether or not to use an IORef for a task? When is a good time to use the State monad over an IORef?

When is it OK to use an IORef?

I want to update the selector for a button programmatically.

I can do this with the xml file which is given below

    &lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
    &lt;selector xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;&gt;
       &lt;item android:state_enabled=&quot;false&quot;
             android:drawable=&quot;@drawable/btn_off&quot; /&gt;
       &lt;item android:state_pressed=&quot;true&quot;
             android:state_enabled=&quot;true&quot; 
             android:drawable=&quot;@drawable/btn_off&quot; /&gt;
       &lt;item android:state_focused=&quot;true&quot;
             android:state_enabled=&quot;true&quot; 
             android:drawable=&quot;@drawable/btn_on&quot; /&gt;
       &lt;item android:state_enabled=&quot;true&quot; 
             android:drawable=&quot;@drawable/btn_on&quot; /&gt;
    &lt;/selector&gt;


I want to do the same thing programmatically. I have tried something like given below

    private StateListDrawable setImageButtonState(int index)
    {
    	StateListDrawable states = new StateListDrawable();
    	
    	states.addState(new int[] {android.R.attr.stateNotNeeded},R.drawable.btn_off); 
    	states.addState(new int[] {android.R.attr.state_pressed, android.R.attr.state_enabled},R.drawable.btn_off);
    	states.addState(new int[] {android.R.attr.state_focused, android.R.attr.state_enabled},R.drawable.btn_on);
    	states.addState(new int[] {android.R.attr.state_enabled},R.drawable.btn_on);
    	
        return states;
    }

but it didnt work.

And how to set `android:state_enabled=&quot;false&quot;` or `android:state_enabled=&quot;true&quot;` programatically.

Android : How to update the selector(StateListDrawable) programmatically

I&#39;m trying to figure out how to notify another component about a state change. Let&#39;s say I have 3 components - App.jsx,Header.jsx,and SidebarPush.jsx and all I&#39;m simply trying to do is toggle a class with an onClick.

So the Header.jsx file will have 2 buttons when clicked will toggle the states to true or false. The other 2 components App.jsx and Header.jsx will need to know about these state changes so they can toggle a class
whenever those states change.



App.jsx
-------------------------------------
    
    import React from &#39;react&#39;;
    import Header from &#39;Header&#39;;
    import classNames from &quot;classnames&quot;;
    import SidebarPush from &#39;SidebarPush&#39;;
    import PageWrapper from &#39;PageWrapper&#39;;
    
    var MainWrapper = React.createClass({
        render: function() {
            return (
                &lt;div className={classNames({ &#39;wrapper&#39;: false, &#39;SidebarPush-collapsed&#39;: !this.state.sidbarPushCollapsed })}&gt;
                    &lt;Header/&gt;
                    &lt;SidebarPush/&gt;
                    &lt;PageWrapper&gt;
                    {this.props.children}
                    &lt;/PageWrapper&gt;
                &lt;/div&gt;
            );
        }
    });
    
    module.exports = MainWrapper;
    
    
    
    
Header.jsx
-------------------------------------
    
    
    
    import React from &#39;react&#39;;
    import ReactDom from &#39;react-dom&#39;;
    
    
    class Header extends React.Component {
        constructor() {
            super();
            this.state = {
                sidbarPushCollapsed: false,
                profileCollapsed: false
            };
            this.handleClick = this.handleClick.bind(this);
        }
        handleClick() {
            this.setState({
                sidbarPushCollapsed: !this.state.sidbarPushCollapsed,
                profileCollapsed: !this.state.profileCollapsed
    
            });
        }
        render() {
            return (
                &lt;header id=&quot;header&quot;&gt;
                    &lt;ul&gt;
                        &lt;li&gt;
                            &lt;button type=&quot;button&quot; id=&quot;sidbarPush&quot; onClick={this.handleClick} profile={this.state.profileCollapsed}&gt;
                                &lt;i className=&quot;fa fa-bars&quot;&gt;&lt;/i&gt;
                            &lt;/button&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;button type=&quot;button&quot; id=&quot;profile&quot; onClick={this.handleClick}&gt;
                                &lt;i className=&quot;icon-user&quot;&gt;&lt;/i&gt;
                            &lt;/button&gt;
                        &lt;/li&gt;
                    &lt;/ul&gt;
                    &lt;ul&gt;
                        &lt;li&gt;
                            &lt;button id=&quot;sidbarOverlay&quot; onClick={this.handleClick}&gt;
                                &lt;i className=&quot;fa fa-indent&quot;&gt;&lt;/i&gt;
                            &lt;/button&gt;
                        &lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/header&gt;
            );
        }
    };
    
    module.exports = Header;
    
    
    
    
SidebarPush.jsx
-------------------------------------
    
    import React from &#39;react&#39;;
    import ReactDom from &#39;react-dom&#39;;
    import classNames from &quot;classnames&quot;;
    
    
    class SidebarPush extends React.Component {
        render() {
            return (
                &lt;aside className=&quot;sidebarPush&quot;&gt;
                    &lt;div className={classNames({ &#39;sidebar-profile&#39;: true, &#39;hidden&#39;: !this.state.pagesCollapsed })}&gt;
                            ....
                    &lt;/div&gt;
                      
                    &lt;nav className=&quot;sidebarNav&quot;&gt;
                            ....
                    &lt;/nav&gt;
                &lt;/aside&gt;
            );
        }
    }
    
    
    export default SidebarPush;




All State Solutions on Gang of Coders

Total of 42 State Solutions