We Keep Coding

Is this a valid use case for derived state from props? [react]

React documentation seems to be very insistent on the idea that in almost every situation, deriving state from props is a bad idea, an anti-pattern, verbose, likely to cause bugs, hard to understand, and all-around probably going to place a curse on one's lineage for a thousand years.
My use case isn't that weird, so I'm probably doing something wrong, but the suggested patterns for not needing getDerivedStateFromProps() (i.e. making Your object fully controlled or fully uncontrolled) don't seem like good solutions.
The situation: I have a Table component, that takes in an array rows as a prop. Table is used in many different places in my app. I want the Table to be able to handle row-sorting. It is obviously a bad idea to to make whichever parent component controls Table to have to control the sorting*, so fully controlled is out. Making Table fully uncontrolled with a key, also seems like it doesn't make a lot of sense unless the key is the row-data itself-- but my understanding is that key is meant to be simple data (like an id), and actually having to compare all of the rows, which are typically fairly complicated objects, would be pretty inefficient**. Using memoize-one is also not an option as I am working in a closed system and can't import any new libraries.
My current solution: Table has a state variable sortedRows which is updated either whenever sort() is called or whenever props.rows is updated (via getDerivedStateFromProps), by:
Making a shallow copy of props.rows,
in-place sorting that copy and
updating state.sortedRows on that value.
As I see it, there is still only one source of truth here (which is from props), and the state is always just storing a sorted version of that truth (but always dependent on and in sync with it).
Is this solution bad? If so why? What would be a better way to implement this?
Thanks!
Note: I didn't include my code because I am massively simplifying the situation in this prompt-- in reality Table element already exists, and is pretty complicated.
Note 2: I going to ask if I'd run into issues once I want to be able to modify elements in the tables, but I think I'm actually ok, since Table doesn't manage its elements, just arrange and display them, and the buttons for adding and removing elements from a table are not contained within Table, so all that processing is happening at the level of the parent's logic as passed down as part of props.rows
*Having something like <Table rows={sort(rowsFromParent)}/>every time I call Table is repetitive and error-prone, and since clicking on a table header determines sorting column, we'd actually have to have the parent element passing down an onClick() function in every case, which quickly and unnecessarily ramps up complexity).
**There is also a secondary problem to do with rebuilding an element. The table has an infinite scroll, such that when You reach a certain element more rows are loaded in. Using key will destroy the Table component and create a new one, scrolling the user to the top of the new table (which could potentially have many thousands of rows). Something also feels wrong about having to set key in each use of Table, even though resetting based on changes to props.rows seems like it should be intrinsic to how Table works, rather than something that has to be configured each time.
Edit: I have React 15.4, which is before getDerivedStateFromProps was added and using a later version is not an option, so I guess even if I happened to find a valid use case for getDerivedStateFromProps, an alternative would be nice...

How to open page with different style depending on which button was clicked by the user?

I want to make two buttons, which will open (depending which is clicked) new page but with different style.
I added eventListener to button and I used window.open, then I want (if it's posible) to somehow call function after the new page is loaded to change style of some elements.
I want to have result similar to two identical htmls but with different function calls from script, but in more dynamic form(so without copypasting htmls)

The first idea that comes to my mind is to pass some GET parameters to indicate whether to apply one of your 2 styles
but if you maybe provide code examples or more details about your problems (code snippets/framework used if any )it may help more for addressing your exact problem and solving it quicker
How to retrieve GET parameters from JavaScript ,This may help if you choose to proceed with my solution

An alternative is to use localStorage and save some piece of data about the style and then on the other window load event you can retrieve and apply it's data where you think it is needed.

ReactJs : useReducer on array of object. I need more understanding

Still new to the world of Js and React, I just made a website that works. But it bothers me the way I made it work. And I would like a bit of insight into how I could do things the better way.
So here I made a simple project on the sandbox to reproduce what I did and ask a few questions.
Here is the sandbox: https://codesandbox.io/s/amazing-dream-oz8ec?file=/src/App.js
You will find a console.log(tab) to keep track of the evolution of the tab.
So here is a quick explanation of the project, I have two components (Mario and Luigi) that I want to interact with and react (no puns intended) with modification on one another. For this, I made an array of objects and put the characteristics of said components in each object. I then make changes to the array of objects with cases that I built in my reducer. From another point of view, I have Mario and Luigi, I want to be able to click on one of them to make them able to jump (by creating a 'jump' buttons that I want exclusive in term of visibility to one of them), then click on the 'jump' button to make one of them jump (which make the one jumping appear full screen on the webpage and the other one invisible for the time being). And the last thing I want an 'exit' button (that appears on while jumping) which will reset my value (of the array) to the original ones.
So here is where I get kind of lost.
First question: So I kind of get the difference between mutating an existing state (no re-render) and returning a new one (actually getting a re-render). In my first case 'toggleCanJump'
the mutation (tab.map(hero => (hero.canJump = false));) is affecting the return since it makes my tab's canJump value exclusive (only one of them can be true at a time), whereas in my second case 'toggleJumped' the mutation (tab.map(hero => (hero.canJump = false));) is not affecting the array, hence why in the className of the button I have two conditions to establish the classes (className={hero.canJump && !hero.jumped ? "btn flex" : "btn"})?
To verify that just comment on the mutation before they return in the first case 'toogleCanJump' and you will see that it is not exclusive anymore both 'canJump' can have the value true. Whereas even with the mutation, I can't achieve to have the value of 'canJump' reacting to triggering 'jumped' even with the mutation that is working as stated just before.
Second question: Which is kind of redundant with the first one. Since I don't seem to get full control of my array of objects, when one the components is full screen and the other one displayed as none (for example: when Mario is jumping and so Luigi disappear). I need a 'reset' button to actually toggle a case that returns (literally copy and paste) the initial value of my
an array of object. I find it clumsy but since I don't fully grasp the manipulation of my array (as stated in question one) I found this solution to make it work. So how would I be able to slice and re-insert properly my object in the array ?
This question is kind of the same as the first one but on a different scenario. I feel like I get the differences between mutating and returning my state (array of object), but I don't seem to be able to make it effective. Mutation on 'toggleCanJump' seem to work but on 'toggleJumped' actually does not, and is returning the tab as I declared it really the best way (more elegant one) to reset it ?
I would like to add that may be it is my logic that is not the good one ! Maybe it should be an array of arrays, I find object to be more talkative for future updates of the website. but I am not against doing it with an other manner.
If you feel like having a solution, or an alternative way of doing things. Your time would be much appreciated. Thank you for reading.

See reconfigured sandbox:
https://codesandbox.io/s/cold-frost-x62x3?file=/src/App.js
In regard to the first question, you are actually using map as though it is forEach and directly mutating state. Map is intended to return a new array, where as you are equating values to the original array by using "=".
The fact that only one appears to effect the outcome however, is an illusion (they both do) and caused by a different reason. Your dispatches were being set off multiple times -- some odd, some even: counter balancing the effect. This was happening for 2 reasons: 1. your reducer wasn't placed outside your function, and 2. your buttons were nested and therefor required e.stopPropagation().
In regard to question two, because your hero.style property is unique, you would need to create an object map to restore it. Its easier to keep it as since the characters are already hard coded into the initial state.

How can I make a MobX-backed form with undo that propagates changes immediately?

My question is very similar to this one, but with a caveat.
My model is a list of items, and a field called selectedItem that can either be null, or point to one of the items. This field is used by the editor component to render and edit.
I'd like to introduce the "cancel" functionality that rolls all changes back. I found createViewModel, and it looks great, but it implies that edits on the view-model won't propagate until I actually commit the changes. And if I do, I can't reset it back.
The thing is, I really like the fact that editing my model directly is immediately reflected in the main display (it's a calendar app, so the editor is next to the main calendar view). Is there any way to have this cake and eat it?
I also reimplemented the dirty field tracking manually, because I needed that for partial updates. The fact that createViewModel would track that for me would be a huge benefit, but I can't see how I could use it in solving my problem, save perhaps for removing the element I'm editing from the collection and rendering it separately... Anyway, if there's some "industry standard practice" to use here, it'd be great to know.

I had similar problem. I ended up creating a temp variable to hold original data when selectedItem is set, and restore the data when clicking "cancel". Not an elegant solution but worked for me.

need to display extra text inputs when selecting add button, also need to remove fields

I have a form that requires the user to input their project's outcome.
They are required to input at least one outcome, and each outcome has a requirement of at least 2 measures associated with it.
So I need the ability to present the user with the initial outcome field, with two measure fields associated with it, with the ability to add more measures to its related outcome.
I sketched up what it would look like if the user were to have two outcomes.
The dotted lines are the actions of each button.
I would like to accomplish this using jQuery, but I have never done anything more than just displaying/hiding a field based on what the user clicks.
Any help is appreciated.
Just to sum it up, they are required to provide one outcome, each outcome has at least two measures.
EDIT: Began proofing it here: http://jsfiddle.net/bkmorse/FW6s8/4/ - but the add measure button is not working properly.

Here is something I put together:
http://jsfiddle.net/jtbowden/XFsyh/
The trickiest part, and most of the code is dealing with form input names.
The main part of the code depends on a non-displayed template which is cloned when elements are added. This makes it easier to create new elements, because you just have to modify the template.
Update: Here is a version that allows you to remove the first outcome/measure as long as others exist, plus I cleaned up some other things (bugs):
http://jsfiddle.net/jtbowden/XFsyh/4/
Note the use of .live(). The buttons in your example don't work because you are assigning handlers once, before those buttons exists. .live() assigns the handler to the root of the DOM, so that any elements added later will also have the correct handler.
Here is the original version with fixes, as per you request:
http://jsfiddle.net/jtbowden/JTUkE/
And if you want it animated:
http://jsfiddle.net/jtbowden/brBSa/