react-playground | Testbed for building things with React | Frontend Framework library

I have an App from create-reat-app. Very simple app with nav menu element and content element. When i click on button in the nav menu dashboard element will load in the content element. Everything worked perfectly. Then i introduced react-router so all changes happened without refreshing the browser. All goo so far.

Then i started playing with redux. Navigation on the left is for certain branches of business (i.e. London, Birmingham). After clicking on one, its id will save into redux store under page.currentBranch. Then the dashboard element will render based on what is in redux. It work fine when clicking on each one, but when hitting back or forward button, the url will change but dashboard still shows the info from the last button clicked as the redux store is not changing on browser back or forward buttons.

I have tried connected router, redux first history and multiple articles about this as well as looked through stackoverflow but still cant make this work

I Have created my first ever sandbox for this so you can understand how its all set up. Iam sure iam doing fundemegntally something wrong but cant figure out what :-)

sandbox

Appreciate any help

I'm trying to move the position of the first item of an array at the press of a button, I tried using array.push(array.shift()); but it doesn't work

codesandbox

I have the following code, simply want to update the text value on input field change.

I have an issue about event in React. Link to sandbox. Here is my index.js file.

I am needing to add bit of text in the sidebar of the following code. In each section, I need to have a count of the number of checkboxes selected. Is it at all possible to do this in a functional component as I have? Any examples that I have found so far are only for class components. I would like to keep it as a functional component if possible.

I have the code below, but here is a working version too:

https://codesandbox.io/s/react-playground-forked-jgmof?file=/index.js

I'm making a to-do list type app to learn React. I have an App component, which contains a Todolist component, which contains ListItem components. Each ListItem component has a title and a boolean completed which is controlled by a checkbox.

ListItem components that are checked and completed are sorted to the bottom of the Todolist. When an item is checked, I call a function setItemCompleted() (passed down in props from App) to update App's state and re-render everything.

In setItemCompleted() I print the updated array of ListItem and it matches what I expect it to be. When React re-renders everything and I open the Chrome inspector to check the rendered HTML, it also matches what I expect it to be. The problem is, the actual ListItem that are displayed on the page do not match either of these; instead of the checked off item moving to the bottom of the page, the last item in the list gets checked.

Here is a "minimal, complete, and reproducible" example:

https://codesandbox.io/s/react-playground-su7iw?file=/index.js