remove element in array with react, no working

No working, handleRemoveNote function the App component:

  handleRemoveNote(id){



    let{ notes } = this.state;



    notes = notes.filter(function(note) {

        return note.noteId !== id;

    })



    for (var i = 0; i < notes.length; i++) {

      notes[i].noteId = i+1;

    }



    this.setState({ notes })

    console.log(notes)

  }

Component Note:

  handleRemove(noteId){

    this.props.removeNote(noteId);

  }

Call onClick

 <span

     onClick = {() => this.handleRemove(this.noteId)}

     >

     <i className="fas fa-trash-alt float-right"></i>

 </span>

Rendering of the notes in the App component:

      {

        this.state.notes.map(note =>{

        return(

          <Note

            removeNote = {this.handleRemoveNote}

            noteId = {note.noteId}

            noteContent= {note.noteContent}

            />

        )

        })

      }

Constructor of Note component:

  constructor(props){

    super(props);

    this.noteId = props.noteId;

    this.noteContent = props.noteContent;

  }

App Component: https://pastebin.com/VCrJBdXT

Note Component: https://pastebin.com/hDmPaGuZ

I do not understand why it does not work, it removes the last item from the list and not the one I want, I made a 'console.log (notes)' and it shows me the arrangement with the elements deleted correctly

edited Nov 27 '18 at 2:25

asked Nov 27 '18 at 0:08

Victor Nuñez

186

Not a solution but remember to add the key parameter for each Note inside the map. I think the problem relies in this.noteId, shouldn't it be this.props.noteId (inside onClick)?

– Alvaro
Nov 27 '18 at 0:26

should it be this.handleRemove(this .props .noteId)} ?

– Austin Greco
Nov 27 '18 at 0:30

constructor(props){ super(props); this.noteId = props.noteId; this.noteContent = props.noteContent; }

– Victor Nuñez
Nov 27 '18 at 0:42

constructor of Note component

– Victor Nuñez
Nov 27 '18 at 0:43

1

@Alvaro Well, code links ready

– Victor Nuñez
Nov 27 '18 at 2:29

|
show 3 more comments

No working, handleRemoveNote function the App component:

  handleRemoveNote(id){



    let{ notes } = this.state;



    notes = notes.filter(function(note) {

        return note.noteId !== id;

    })



    for (var i = 0; i < notes.length; i++) {

      notes[i].noteId = i+1;

    }



    this.setState({ notes })

    console.log(notes)

  }

Component Note:

  handleRemove(noteId){

    this.props.removeNote(noteId);

  }

Call onClick

 <span

     onClick = {() => this.handleRemove(this.noteId)}

     >

     <i className="fas fa-trash-alt float-right"></i>

 </span>

Rendering of the notes in the App component:

      {

        this.state.notes.map(note =>{

        return(

          <Note

            removeNote = {this.handleRemoveNote}

            noteId = {note.noteId}

            noteContent= {note.noteContent}

            />

        )

        })

      }

Constructor of Note component:

  constructor(props){

    super(props);

    this.noteId = props.noteId;

    this.noteContent = props.noteContent;

  }

App Component: https://pastebin.com/VCrJBdXT

Note Component: https://pastebin.com/hDmPaGuZ

edited Nov 27 '18 at 2:25

asked Nov 27 '18 at 0:08

Victor Nuñez

186

Not a solution but remember to add the key parameter for each Note inside the map. I think the problem relies in this.noteId, shouldn't it be this.props.noteId (inside onClick)?

– Alvaro
Nov 27 '18 at 0:26

should it be this.handleRemove(this .props .noteId)} ?

– Austin Greco
Nov 27 '18 at 0:30

constructor(props){ super(props); this.noteId = props.noteId; this.noteContent = props.noteContent; }

– Victor Nuñez
Nov 27 '18 at 0:42

constructor of Note component

– Victor Nuñez
Nov 27 '18 at 0:43

1

@Alvaro Well, code links ready

– Victor Nuñez
Nov 27 '18 at 2:29

|
show 3 more comments

No working, handleRemoveNote function the App component:

  handleRemoveNote(id){



    let{ notes } = this.state;



    notes = notes.filter(function(note) {

        return note.noteId !== id;

    })



    for (var i = 0; i < notes.length; i++) {

      notes[i].noteId = i+1;

    }



    this.setState({ notes })

    console.log(notes)

  }

Component Note:

  handleRemove(noteId){

    this.props.removeNote(noteId);

  }

Call onClick

 <span

     onClick = {() => this.handleRemove(this.noteId)}

     >

     <i className="fas fa-trash-alt float-right"></i>

 </span>

Rendering of the notes in the App component:

      {

        this.state.notes.map(note =>{

        return(

          <Note

            removeNote = {this.handleRemoveNote}

            noteId = {note.noteId}

            noteContent= {note.noteContent}

            />

        )

        })

      }

Constructor of Note component:

  constructor(props){

    super(props);

    this.noteId = props.noteId;

    this.noteContent = props.noteContent;

  }

App Component: https://pastebin.com/VCrJBdXT

Note Component: https://pastebin.com/hDmPaGuZ

edited Nov 27 '18 at 2:25

asked Nov 27 '18 at 0:08

Victor Nuñez

186

No working, handleRemoveNote function the App component:

  handleRemoveNote(id){



    let{ notes } = this.state;



    notes = notes.filter(function(note) {

        return note.noteId !== id;

    })



    for (var i = 0; i < notes.length; i++) {

      notes[i].noteId = i+1;

    }



    this.setState({ notes })

    console.log(notes)

  }

Component Note:

  handleRemove(noteId){

    this.props.removeNote(noteId);

  }

Call onClick

 <span

     onClick = {() => this.handleRemove(this.noteId)}

     >

     <i className="fas fa-trash-alt float-right"></i>

 </span>

Rendering of the notes in the App component:

      {

        this.state.notes.map(note =>{

        return(

          <Note

            removeNote = {this.handleRemoveNote}

            noteId = {note.noteId}

            noteContent= {note.noteContent}

            />

        )

        })

      }

Constructor of Note component:

  constructor(props){

    super(props);

    this.noteId = props.noteId;

    this.noteContent = props.noteContent;

  }

App Component: https://pastebin.com/VCrJBdXT

Note Component: https://pastebin.com/hDmPaGuZ

javascript reactjs

edited Nov 27 '18 at 2:25

asked Nov 27 '18 at 0:08

Victor Nuñez

186

edited Nov 27 '18 at 2:25

asked Nov 27 '18 at 0:08

Victor Nuñez

186

edited Nov 27 '18 at 2:25

asked Nov 27 '18 at 0:08

Victor Nuñez

186

asked Nov 27 '18 at 0:08

Victor Nuñez

186

asked Nov 27 '18 at 0:08

Victor Nuñez

186

Not a solution but remember to add the key parameter for each Note inside the map. I think the problem relies in this.noteId, shouldn't it be this.props.noteId (inside onClick)?

– Alvaro
Nov 27 '18 at 0:26

should it be this.handleRemove(this .props .noteId)} ?

– Austin Greco
Nov 27 '18 at 0:30

constructor(props){ super(props); this.noteId = props.noteId; this.noteContent = props.noteContent; }

– Victor Nuñez
Nov 27 '18 at 0:42

constructor of Note component

– Victor Nuñez
Nov 27 '18 at 0:43

1

@Alvaro Well, code links ready

– Victor Nuñez
Nov 27 '18 at 2:29

|
show 3 more comments

Not a solution but remember to add the key parameter for each Note inside the map. I think the problem relies in this.noteId, shouldn't it be this.props.noteId (inside onClick)?

– Alvaro
Nov 27 '18 at 0:26

should it be this.handleRemove(this .props .noteId)} ?

– Austin Greco
Nov 27 '18 at 0:30

constructor(props){ super(props); this.noteId = props.noteId; this.noteContent = props.noteContent; }

– Victor Nuñez
Nov 27 '18 at 0:42

constructor of Note component

– Victor Nuñez
Nov 27 '18 at 0:43

1

@Alvaro Well, code links ready

– Victor Nuñez
Nov 27 '18 at 2:29

Not a solution but remember to add the key parameter for each Note inside the map. I think the problem relies in this.noteId, shouldn't it be this.props.noteId (inside onClick)?

– Alvaro
Nov 27 '18 at 0:26

should it be this.handleRemove(this .props .noteId)} ?

– Austin Greco
Nov 27 '18 at 0:30

constructor(props){ super(props); this.noteId = props.noteId; this.noteContent = props.noteContent; }

– Victor Nuñez
Nov 27 '18 at 0:42

constructor of Note component

– Victor Nuñez
Nov 27 '18 at 0:43

@Alvaro Well, code links ready

– Victor Nuñez
Nov 27 '18 at 2:29

|
show 3 more comments

1 Answer
1

active

oldest

votes

here's a few problems in the code you provided by the links:
1. the key property must be given when iterating in map

this.state.notes.map(note =>

<Note

removeNote = {this.handleRemoveNote}

noteId = {note.noteId}

noteContent= {note.noteContent}

key={note.noteId}

/>)

and then it should be removed from Note render() method

you don't actually want to re-assign you keys after removal, must probably you will get those ids from the server, so you have to use them as keys. And also it's the main problem here

this way your new notes array won't contain the element with the key which is the index of your last element, so it thinks you want to remove the element with this key - the last element. Just remove that loop and everything should work fine

for (var i = 0; i < notes.length; i++) {

    notes[i].noteId = i+1;

}

edited Nov 27 '18 at 3:38

answered Nov 27 '18 at 3:30

Alex Tepliashin

613

that reorder of keys is because when you delete a note for example I had note 1, note 2 and note 3 if you deleted note 2 and added a new one had two notes with the same key 3

– Victor Nuñez
Nov 27 '18 at 3:50

then you might need to use something else as a key for your elements, you can't rely on the ids you will provide from ui, the ids used for keys must be unique, possible solutions: 1) you use some internal ids as keys and they will be unique for all the notes, you can use something like npmjs.com/package/shortid 2) don't enter ids from ui and assign them internally and be sure they are always unique + remove that re-ordering code.

– Alex Tepliashin
Nov 27 '18 at 4:01

no working.....

– Victor Nuñez
Nov 27 '18 at 12:28

i.ibb.co/HTXGfCv/chrome-2018-11-27-09-32-10.png

– Victor Nuñez
Nov 27 '18 at 12:33

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53490927%2fremove-element-in-array-with-react-no-working%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

here's a few problems in the code you provided by the links:
1. the key property must be given when iterating in map

this.state.notes.map(note =>

<Note

removeNote = {this.handleRemoveNote}

noteId = {note.noteId}

noteContent= {note.noteContent}

key={note.noteId}

/>)

and then it should be removed from Note render() method

you don't actually want to re-assign you keys after removal, must probably you will get those ids from the server, so you have to use them as keys. And also it's the main problem here

for (var i = 0; i < notes.length; i++) {

    notes[i].noteId = i+1;

}

edited Nov 27 '18 at 3:38

answered Nov 27 '18 at 3:30

Alex Tepliashin

613

that reorder of keys is because when you delete a note for example I had note 1, note 2 and note 3 if you deleted note 2 and added a new one had two notes with the same key 3

– Victor Nuñez
Nov 27 '18 at 3:50

then you might need to use something else as a key for your elements, you can't rely on the ids you will provide from ui, the ids used for keys must be unique, possible solutions: 1) you use some internal ids as keys and they will be unique for all the notes, you can use something like npmjs.com/package/shortid 2) don't enter ids from ui and assign them internally and be sure they are always unique + remove that re-ordering code.

– Alex Tepliashin
Nov 27 '18 at 4:01

no working.....

– Victor Nuñez
Nov 27 '18 at 12:28

i.ibb.co/HTXGfCv/chrome-2018-11-27-09-32-10.png

– Victor Nuñez
Nov 27 '18 at 12:33

add a comment |

here's a few problems in the code you provided by the links:
1. the key property must be given when iterating in map

this.state.notes.map(note =>

<Note

removeNote = {this.handleRemoveNote}

noteId = {note.noteId}

noteContent= {note.noteContent}

key={note.noteId}

/>)

and then it should be removed from Note render() method

you don't actually want to re-assign you keys after removal, must probably you will get those ids from the server, so you have to use them as keys. And also it's the main problem here

for (var i = 0; i < notes.length; i++) {

    notes[i].noteId = i+1;

}

edited Nov 27 '18 at 3:38

answered Nov 27 '18 at 3:30

Alex Tepliashin

613

that reorder of keys is because when you delete a note for example I had note 1, note 2 and note 3 if you deleted note 2 and added a new one had two notes with the same key 3

– Victor Nuñez
Nov 27 '18 at 3:50

then you might need to use something else as a key for your elements, you can't rely on the ids you will provide from ui, the ids used for keys must be unique, possible solutions: 1) you use some internal ids as keys and they will be unique for all the notes, you can use something like npmjs.com/package/shortid 2) don't enter ids from ui and assign them internally and be sure they are always unique + remove that re-ordering code.

– Alex Tepliashin
Nov 27 '18 at 4:01

no working.....

– Victor Nuñez
Nov 27 '18 at 12:28

i.ibb.co/HTXGfCv/chrome-2018-11-27-09-32-10.png

– Victor Nuñez
Nov 27 '18 at 12:33

add a comment |

here's a few problems in the code you provided by the links:
1. the key property must be given when iterating in map

this.state.notes.map(note =>

<Note

removeNote = {this.handleRemoveNote}

noteId = {note.noteId}

noteContent= {note.noteContent}

key={note.noteId}

/>)

and then it should be removed from Note render() method

you don't actually want to re-assign you keys after removal, must probably you will get those ids from the server, so you have to use them as keys. And also it's the main problem here

for (var i = 0; i < notes.length; i++) {

    notes[i].noteId = i+1;

}

edited Nov 27 '18 at 3:38

answered Nov 27 '18 at 3:30

Alex Tepliashin

613

here's a few problems in the code you provided by the links:
1. the key property must be given when iterating in map

this.state.notes.map(note =>

<Note

removeNote = {this.handleRemoveNote}

noteId = {note.noteId}

noteContent= {note.noteContent}

key={note.noteId}

/>)

and then it should be removed from Note render() method

you don't actually want to re-assign you keys after removal, must probably you will get those ids from the server, so you have to use them as keys. And also it's the main problem here

for (var i = 0; i < notes.length; i++) {

    notes[i].noteId = i+1;

}

edited Nov 27 '18 at 3:38

answered Nov 27 '18 at 3:30

Alex Tepliashin

613

edited Nov 27 '18 at 3:38

answered Nov 27 '18 at 3:30

Alex Tepliashin

613

answered Nov 27 '18 at 3:30

Alex Tepliashin

613

answered Nov 27 '18 at 3:30

Alex Tepliashin

613

that reorder of keys is because when you delete a note for example I had note 1, note 2 and note 3 if you deleted note 2 and added a new one had two notes with the same key 3

– Victor Nuñez
Nov 27 '18 at 3:50

then you might need to use something else as a key for your elements, you can't rely on the ids you will provide from ui, the ids used for keys must be unique, possible solutions: 1) you use some internal ids as keys and they will be unique for all the notes, you can use something like npmjs.com/package/shortid 2) don't enter ids from ui and assign them internally and be sure they are always unique + remove that re-ordering code.

– Alex Tepliashin
Nov 27 '18 at 4:01

no working.....

– Victor Nuñez
Nov 27 '18 at 12:28

i.ibb.co/HTXGfCv/chrome-2018-11-27-09-32-10.png

– Victor Nuñez
Nov 27 '18 at 12:33

add a comment |

that reorder of keys is because when you delete a note for example I had note 1, note 2 and note 3 if you deleted note 2 and added a new one had two notes with the same key 3

– Victor Nuñez
Nov 27 '18 at 3:50

then you might need to use something else as a key for your elements, you can't rely on the ids you will provide from ui, the ids used for keys must be unique, possible solutions: 1) you use some internal ids as keys and they will be unique for all the notes, you can use something like npmjs.com/package/shortid 2) don't enter ids from ui and assign them internally and be sure they are always unique + remove that re-ordering code.

– Alex Tepliashin
Nov 27 '18 at 4:01

no working.....

– Victor Nuñez
Nov 27 '18 at 12:28

i.ibb.co/HTXGfCv/chrome-2018-11-27-09-32-10.png

– Victor Nuñez
Nov 27 '18 at 12:33

that reorder of keys is because when you delete a note for example I had note 1, note 2 and note 3 if you deleted note 2 and added a new one had two notes with the same key 3

– Victor Nuñez
Nov 27 '18 at 3:50

then you might need to use something else as a key for your elements, you can't rely on the ids you will provide from ui, the ids used for keys must be unique, possible solutions: 1) you use some internal ids as keys and they will be unique for all the notes, you can use something like npmjs.com/package/shortid 2) don't enter ids from ui and assign them internally and be sure they are always unique + remove that re-ordering code.

– Alex Tepliashin
Nov 27 '18 at 4:01

no working.....

– Victor Nuñez
Nov 27 '18 at 12:28

i.ibb.co/HTXGfCv/chrome-2018-11-27-09-32-10.png

– Victor Nuñez
Nov 27 '18 at 12:33

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Btukfyl