How to map an array after making changes to it in react js?

Question

I'm mapping an array and each has a button to delete it from the array :

const comments = [ 'Hey', 'Yo' ];

            {comments.map((each, index) => {
                return (
                    <div key={index}>
                        <button
                            onClick={() => {
                                console.log(comments.indexOf(each));
                                const id = comments.indexOf(each);
                                comments.splice(id, 1);
                                console.log(comments);
                            }}
                        >
                            Button
                        </button>
                    </div>);
            }

When the button is clicked the item will be deleted and It console logs the array after deleting it and it works fine .

1
App.js:17 ["Hey"]
App.js:14 0
App.js:17 []

The only problem is the array which is displayed on the screen doesn't update in other words array displayed on the screen doesn't change after clicking the button and it still shows the whole array which has all the items .

How can I map through the changed version of the array or what am I doing wrong with mapping an array that doesn't display the changed version of it ?

Martin Gainza · Accepted Answer · 2020-07-21 15:29:45Z

4

You must have to use useState.

import React, { useState } from 'react';

const [comments, setComments ] = useState([ 'Hey', 'Yo' ]);

and inside your onClick function:

setComments(comments.filter((comment, index)=>index!==id));

I used .filter because your use of splice will return the cutted element of the array.

edited Jul 21, 2020 at 15:29

answered Jul 21, 2020 at 12:23

Martin Gainza

1,42714 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Muhammad Saqlain · Accepted Answer · 2020-07-21 12:31:58Z

2

Assign the updated array to the real array like this. and change the type of comments to var. const cant be updated.

comments = comments.splice(id, 1);

If you want to rerender after deletion, you can use state variables and setState on deletion.

In the constructor of component initialize the comments variable

constructor(props) {
    super(props);
    this.state = {comments: ['A', 'B']};
  }

Then on click of delete button update the state

this.setState({
      comments: comments.splice(id, 1);
    });

edited Jul 21, 2020 at 12:31

answered Jul 21, 2020 at 12:20

Muhammad Saqlain

2,2104 gold badges39 silver badges54 bronze badges

2 Comments

Patrick Hund Over a year ago

I don't think that will help. The problem is that the component won't re-render. The proper solution would be to use useState for the comments.

Muhammad Saqlain Over a year ago

In any case you have to update the original array or state variable.

bik · Accepted Answer · 2020-07-21 12:22:17Z

1

If you are using React Hooks in your project may simply use the useState() then you could simply set the values.

answered Jul 21, 2020 at 12:22

bik

3391 silver badge8 bronze badges

Comments

Mario Nikolaus · Accepted Answer · 2020-07-21 12:27:57Z

1

You are missing the point in how React internally works. React will rerender the component based on props or state change.

You are not using the React state here, which would then cause the component to render again with new value of the state.

Simply put comments in state like this const [comments, setComments] = useState([ 'Hey', 'Yo' ])

and then assign new value of comments in your callback with setComments

answered Jul 21, 2020 at 12:27

Mario Nikolaus

2,4061 gold badge23 silver badges29 bronze badges

Collectives™ on Stack Overflow

How to map an array after making changes to it in react js?

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related