Adding Value in an array by click in a "button"

Question

I have an array. That has a value of Objects. There are 3 values in 1 Array for 1 Object.

It's a ReactJS project.

For example like that

const x = useMemo(() => [

[1, 1, 1],
[2, 2, 2],
[3, 3, 3],
[4, 4, 4],
[5, 5, 5],

]);

Now I have a button.

My question is "How or What function I can add to my button so that it will change the Middle value[1] of each array"

For example: after clicking the button I want to add [ - 0.5 * 2 ] in the middle value.

!!! Click !!!

const x = useMemo(() => [

[1, 1, 1],
[2, 2, 2],
[3, 3, 3],
[4, 4, 4],
[5, 5 - 0.5 * 2, 5],
[6, 6 - 0.5 * 2, 6]
]);

!!! Click [2nd time] !!!

const x = useMemo(() => [

[1, 1, 1],
[2, 2, 2],
[3, 3 - 0.5 * 2, 3],
[4, 4 - 0.5 * 2, 4],
[5, 5 - 0.5 * 2, 5],
[6, 6 - 0.5 * 2, 6]
]);

!!! Click [3rd time] !!!

const x = useMemo(() => [

[1, 1 - 0.5 * 2, 1],
[2, 2 - 0.5 * 2, 2],
[3, 3 - 0.5 * 2, 3],
[4, 4 - 0.5 * 2, 4],
[5, 5 - 0.5 * 2, 5],
[6, 6 - 0.5 * 2, 6]
]);

and so forth.

What should happen 4th time? For first 3 times, all the middle values might have converted, so wondering if the conversion should not happen 4th time? — Sandeep Amarnath, Jan 10 '23 at 14:51
@SandeepAmarnath After the first 3 times then it goes to the default position. — Azmee Ahmed, Jan 10 '23 at 15:14

Simao · Accepted Answer · 2023-01-10T19:14:01.613

2

import { useState } from 'react';

export default function DemoPage() {
  const [positions, setPositions] = useState([
    [1, 1, 1],
    [2, 2, 2],
    [3, 3, 3],
    [4, 4, 4],
    [5, 5, 5],
  ]);
  const targetIndex = positions.length - 1;

  const clickHandle = () => {
    const nextPositions = positions.map((items, index) => {
      if (targetIndex === index) {
        // If there are more array items, you can use `.map` .
        // return items.map((value) => value * 2);
        return [items[0], (items[1] - 0.5) * 2, items[2]];
      }
      return items;
    });

    setPositions(nextPositions);
    console.log('positions :>> ', positions);
  };
  return (
    <div>
      <p>position is { positions[targetIndex].join(',') }</p>
      <button type="button" onClick={clickHandle}>Click</button>
    </div>
  );
}

To update the array see here: https://beta.reactjs.org/learn/updating-arrays-in-state#replacing-items-in-an-array

It is recommended to use "use-immer", which makes data updates easier.

use-immer: https://www.npmjs.com/package/use-immer

edited Jan 10 '23 at 19:14

answered Jan 10 '23 at 14:59

Simao

171
1
4

Can I do it without using "useState" ? – Azmee Ahmed Jan 10 '23 at 15:10
Here are the actual issues, as you can see I want to chnage the value of the "positions" https://codesandbox.io/s/5thhhhhhhhhhh-30q7f2?file=/src/components/PartOne.js – Azmee Ahmed Jan 10 '23 at 15:12
I would like to ask why you want to use "useMemo", I'm a bit confused about your needs? https://beta.reactjs.org/reference/react/useMemo – Simao Jan 10 '23 at 15:37
Please see the code I've attached the link. Then you will see why I'm using "useMemo". I'm using "useMemo" to change the room position. But I don't know any other easy ways to do it. But if you have any other solution for the "useState" instead of "useMemo" please tell me :) Thanks! – Azmee Ahmed Jan 10 '23 at 15:50
Sorry I didn't express my doubts clearly, "useMemo" is a Hook that cache the result of a calculation, please check the docs in the previous comment for details, one of its params is a reactive values, so I read your code and I still don't know your needs,can you describe your requirements in detail and provide a minimum use case? – Simao Jan 10 '23 at 16:18
I tried to use your code but it's not working or maybe not rendering on live / demo. Do I need to use "useEffect"? And btw, I need to change the room position using "useState" or "useMemo" or any other way. Here's the code where I'm using your function: https://codesandbox.io/s/4-thhhhhhhhhhhhh-zpi03t?file=/src/components/PartOne.js – Azmee Ahmed Jan 10 '23 at 16:40
1

It works fine now, the problem was because "useState" did not take effect when updating the values in the array, see: https://beta.reactjs.org/learn/updating-arrays-in-state#replacing-items-in-an-array, I replaced it with the simpler "useImmer" to update the data, the code is here: https://codesandbox.io/s/4-thhhhhhhhhhhhh-forked-ocmu2z?file=/src/components/PartOne.js – Simao Jan 10 '23 at 18:25
Thanks! How can I add it as a loop for the rest of the rooms? As of now, it working for the number 8 room so I want to loop it for all the rooms. Your help would be really appreciated. – Azmee Ahmed Jan 10 '23 at 19:34
You just need to loop through the updated data, see here: https://codesandbox.io/s/4-thhhhhhhhhhhhh-forked-ocmu2z?file=/src/components/PartOne.js – Simao Jan 10 '23 at 20:28
1

I wanted to loop them one by one as you showed the previous one but there were just for the "number 8" room so I wanted to try for each room that way. For ex: If I click "button 2" then the "number 8" goes down and if I again click it then "room 7" goes down then again and forth. – Azmee Ahmed Jan 10 '23 at 20:48
1

Decreasing index is fine. https://codesandbox.io/s/4-thhhhhhhhhhhhh-forked-ocmu2z?file=/src/components/PartOne.js – Simao Jan 11 '23 at 04:33
1

Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/251019/discussion-between-simao-and-azmee-ahmed). – Simao Jan 11 '23 at 04:53
@Simao can you please check this question? https://stackoverflow.com/questions/75124249/uncaught-typeerror-cannot-read-properties-of-undefined-reading-gettotallength?noredirect=1#comment132569913_75124249 – Sayedul Karim Jan 15 '23 at 10:52

Adding Value in an array by click in a "button"

1 Answers1