0
  • 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.

Hamada
  • 1,836
  • 3
  • 13
  • 27
Othman
  • 72
  • 10

1 Answers1

1

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.

Pavlos Karalis
  • 2,893
  • 1
  • 6
  • 14
  • 1
    Okay firstly, thank you I am the one from yesterday with the planets (in case you did not notice) but that is beside the point. I get why I was using map instead of for each, did not get that on my first read of MDN but now I get it map return an array of the result so anyway I was missing the point completely, when forEach was the one I was looking for. So I get what you are saying about question two aswell. Thanks a lot man, yesterday I was hesitant to ask you more about it, that is why I created a post with other questions. But since you are still the hero of the day for me. – Othman Jul 06 '20 at 21:38
  • Would you care point me to a doc where I can find more details about : ```[ ...jumped.slice(0, action.index), { ...jumped[action.index], jumped: true }, ...jumped.slice(action.index + 1) ];```, I have look on MDN and such and dont seem to find it, I would like to explore it more. I feel that I grasp more or less the concept but I would like to toy with it a bit more. I feel like it is the opposite of array.join but dont seem to find an anser when i look for 'creating array from arrays' (for exemple). – Othman Jul 06 '20 at 21:48
  • In any case I am really thankfull to you, you have already been so helpful. – Othman Jul 06 '20 at 21:49
  • I don't think there's a doc for it, its just 1 way of creating a new nested state object. You copy everything up until the index that needs changing ( slice.(0,action.index)); , then create a new object in place of the object within the index you're changing, and finally copy everything after the index you're changing ( slice.(action.index +1)). I believe an alternative would be to conditionally use .map((obj, index)=>{}), where if the index === action.index, you'd return the new object, and for all other indexes, return the original object. – Pavlos Karalis Jul 06 '20 at 23:18
  • 1
    Okay I think I get everything that I was l missing for now on. In any case I will come back to you if I do get more questions if you don't mind of course !? – Othman Jul 07 '20 at 12:14