Ufdjrw

Checks user level and limit the data before saving it to mongoDB

On The Origin of Dissonant Chords

How did Captain America manage to do this?

Can SQL Server create collisions in system generated constraint names?

What term is being referred to with "reflected-sound-of-underground-spirits"?

Rivers without rain

Size of electromagnet needed to replicate Earth's magnetic field

Was there a shared-world project before "Thieves World"?

Alignment of various blocks in tikz

Apply MapThread to all but one variable

555 timer FM transmitter

Philosophical question on logistic regression: why isn't the optimal threshold value trained?

Can I criticise the more senior developers around me for not writing clean code?

How to write a column outside the braces in a matrix?

Why must Chinese maps be obfuscated?

I preordered a game on my Xbox while on the home screen of my friend's account. Which of us owns the game?

As an international instructor, should I openly talk about my accent?

What happens to Mjolnir (Thor's hammer) at the end of Endgame?

Aliens crash on Earth and go into stasis to wait for technology to fix their ship

What does ゆーか mean?

What's the polite way to say "I need to urinate"?

"You've called the wrong number" or "You called the wrong number"

Do I have an "anti-research" personality?

Contradiction proof for inequality of P and NP?

refering a button to a specific li?

Other way to creating a function that can receive param from each element from array?Trigger a button click with JavaScript on the Enter key in a text boxWhere should I put <script> tags in HTML markup?How do I add a class to a given element?How do I loop through or enumerate a JavaScript object?Convert form data to JavaScript object with jQueryHow to merge two arrays in JavaScript and de-duplicate itemsHow to create an HTML button that acts like a link?How to decide when to use Node.js?How do I remove a particular element from an array in JavaScript?jQuery scroll to element

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

1

I have a html tag in my react app like this

<ul>
 <li>
 Item 1
 <button>
 Delete
 </button>
 </li>
 <li>
 Item 2
 <button>
 Delete
 </button>
 </li> 
 <li>
 Item 3
 <button>
 Delete
 </button>
 </li> 
</ul>

Now, if I click Delete button from one of my li elements, I want to delete that specific li. How do I refer the button clicked to that specific li using javascript only?

javascript html reactjs

share|improve this question

asked Mar 9 at 8:51

Kevin ChandraKevin Chandra

2517

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Use a map that'll solve all your problem
  
  – Germa Vinsmoke
  Mar 9 at 8:54
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @GermaVinsmoke can you explain more? I've seen some other solution, but it's always involving some jquery, is there any other way using javascript only or 'reactjs' way?
  
  – Kevin Chandra
  Mar 9 at 8:56
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Give an id to all the li tags using map then on button click you can use that id and delete it
  
  – Germa Vinsmoke
  Mar 9 at 9:01
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @GermaVinsmoke I see your point now, you can put that in the answer, and I will mark that as accepted answer.
  
  – Kevin Chandra
  Mar 9 at 9:07
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I'm trying that man, this internet not working properly XD
  
  – Germa Vinsmoke
  Mar 9 at 9:07
  

  
  
  
  

add a comment | 

1

I have a html tag in my react app like this

<ul>
 <li>
 Item 1
 <button>
 Delete
 </button>
 </li>
 <li>
 Item 2
 <button>
 Delete
 </button>
 </li> 
 <li>
 Item 3
 <button>
 Delete
 </button>
 </li> 
</ul>

Now, if I click Delete button from one of my li elements, I want to delete that specific li. How do I refer the button clicked to that specific li using javascript only?

javascript html reactjs

share|improve this question

asked Mar 9 at 8:51

Kevin ChandraKevin Chandra

2517

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Use a map that'll solve all your problem
  
  – Germa Vinsmoke
  Mar 9 at 8:54
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @GermaVinsmoke can you explain more? I've seen some other solution, but it's always involving some jquery, is there any other way using javascript only or 'reactjs' way?
  
  – Kevin Chandra
  Mar 9 at 8:56
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Give an id to all the li tags using map then on button click you can use that id and delete it
  
  – Germa Vinsmoke
  Mar 9 at 9:01
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @GermaVinsmoke I see your point now, you can put that in the answer, and I will mark that as accepted answer.
  
  – Kevin Chandra
  Mar 9 at 9:07
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I'm trying that man, this internet not working properly XD
  
  – Germa Vinsmoke
  Mar 9 at 9:07
  

  
  
  
  

add a comment | 

I have a html tag in my react app like this

<ul>
 <li>
 Item 1
 <button>
 Delete
 </button>
 </li>
 <li>
 Item 2
 <button>
 Delete
 </button>
 </li> 
 <li>
 Item 3
 <button>
 Delete
 </button>
 </li> 
</ul>

Now, if I click Delete button from one of my li elements, I want to delete that specific li. How do I refer the button clicked to that specific li using javascript only?

javascript html reactjs

share|improve this question

asked Mar 9 at 8:51

Kevin ChandraKevin Chandra

2517

<ul>
 <li>
 Item 1
 <button>
 Delete
 </button>
 </li>
 <li>
 Item 2
 <button>
 Delete
 </button>
 </li> 
 <li>
 Item 3
 <button>
 Delete
 </button>
 </li> 
</ul>

share|improve this question

asked Mar 9 at 8:51

Kevin ChandraKevin Chandra

2517

share|improve this question

asked Mar 9 at 8:51

Kevin ChandraKevin Chandra

2517

asked Mar 9 at 8:51

Kevin ChandraKevin Chandra

2517

asked Mar 9 at 8:51

Kevin ChandraKevin Chandra

2517

2 Answers
2

active

oldest

votes

1

Use Array.map() to generate your items and attach an onClick handler like this:

class Demo extends React.Component 
 state = items: ['Item 1', 'Item 2', 'Item 3'] ;
 
 handleDelete = name => 
 this.setState(s => ( items: s.items.filter(x => x !== name) ));
 

 render() 
 return (
 <ul>this.state.items.map(x =>
 <li>x&nbsp;
 <button onClick=() => this.handleDelete(x)>Delete</button>
 </li>
 )</ul>
 );
 


ReactDOM.render(<Demo />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

If you do not want to generate a delete function for each item and handle the deletion in a single function, you will have to add an id of some kind to your items to identify them. Then you can attach this id to the button using a data attribute and get this id from the event.target in the handler:

class Demo extends React.Component 
 state = 
 items: [
 id: 1, content: 'Item 1' ,
 id: 2, content: 'Item 2' ,
 id: 3, content: 'Item 3' 
 ]
 ;
 
 handleDelete = e => 
 const id = +e.target.getAttribute('data-id');
 this.setState(s => ( items: s.items.filter(x => x.id !== id) ));
 

 render() 
 return (
 <ul>this.state.items.map(( id, content ) =>
 <li key=id>content&nbsp;
 <button data-id=id onClick=this.handleDelete>Delete</button>
 </li>
 )</ul>
 );
 


ReactDOM.render(<Demo />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

share|improve this answer

edited Mar 20 at 16:21

answered Mar 9 at 9:13

jo_vajo_va

9,48621032

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  is there any other way than this that more efficient? I heard that putting an arrow function inside each element of array like that is costly, because you generate a function for each element instead of generate one function that can handle each element.
  
  – Kevin Chandra
  Mar 20 at 16:07
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Kevin Chandra, I would suggest to not worry about this until you do have performance problems, passing functions around is something that is done everywhere in functional languages.
  
  – jo_va
  Mar 20 at 16:11
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Sure, but I still want to know if there any other solution
  
  – Kevin Chandra
  Mar 20 at 16:16
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Kevin Chandra, I will update my answer and add a snippet for another way to do it
  
  – jo_va
  Mar 20 at 16:18
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thanks for the other solution, however that is the same solution from GermaVinsmoke. Actually I heard the other solution is to wrap the button with some other component which has a prop of the element's id or content and also a prop of the function to handle it which is handleDelete in this case. But still, I only grasp the concept of it.
  
  – Kevin Chandra
  Mar 20 at 16:28
  

  
  
  
  

 | 
show 1 more comment

0

You can give id properties to your button element based on id from li element, and use that id when referring the item that want to be deleted.

share|improve this answer

answered Mar 9 at 9:11

Kevin ChandraKevin Chandra

2517

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');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55075591%2frefering-a-button-to-a-specific-li%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

Use Array.map() to generate your items and attach an onClick handler like this:

class Demo extends React.Component 
 state = items: ['Item 1', 'Item 2', 'Item 3'] ;
 
 handleDelete = name => 
 this.setState(s => ( items: s.items.filter(x => x !== name) ));
 

 render() 
 return (
 <ul>this.state.items.map(x =>
 <li>x&nbsp;
 <button onClick=() => this.handleDelete(x)>Delete</button>
 </li>
 )</ul>
 );
 


ReactDOM.render(<Demo />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

If you do not want to generate a delete function for each item and handle the deletion in a single function, you will have to add an id of some kind to your items to identify them. Then you can attach this id to the button using a data attribute and get this id from the event.target in the handler:

class Demo extends React.Component 
 state = 
 items: [
 id: 1, content: 'Item 1' ,
 id: 2, content: 'Item 2' ,
 id: 3, content: 'Item 3' 
 ]
 ;
 
 handleDelete = e => 
 const id = +e.target.getAttribute('data-id');
 this.setState(s => ( items: s.items.filter(x => x.id !== id) ));
 

 render() 
 return (
 <ul>this.state.items.map(( id, content ) =>
 <li key=id>content&nbsp;
 <button data-id=id onClick=this.handleDelete>Delete</button>
 </li>
 )</ul>
 );
 


ReactDOM.render(<Demo />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

share|improve this answer

edited Mar 20 at 16:21

answered Mar 9 at 9:13

jo_vajo_va

9,48621032

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  is there any other way than this that more efficient? I heard that putting an arrow function inside each element of array like that is costly, because you generate a function for each element instead of generate one function that can handle each element.
  
  – Kevin Chandra
  Mar 20 at 16:07
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Kevin Chandra, I would suggest to not worry about this until you do have performance problems, passing functions around is something that is done everywhere in functional languages.
  
  – jo_va
  Mar 20 at 16:11
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Sure, but I still want to know if there any other solution
  
  – Kevin Chandra
  Mar 20 at 16:16
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Kevin Chandra, I will update my answer and add a snippet for another way to do it
  
  – jo_va
  Mar 20 at 16:18
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thanks for the other solution, however that is the same solution from GermaVinsmoke. Actually I heard the other solution is to wrap the button with some other component which has a prop of the element's id or content and also a prop of the function to handle it which is handleDelete in this case. But still, I only grasp the concept of it.
  
  – Kevin Chandra
  Mar 20 at 16:28
  

  
  
  
  

 | 
show 1 more comment

1

Use Array.map() to generate your items and attach an onClick handler like this:

class Demo extends React.Component 
 state = items: ['Item 1', 'Item 2', 'Item 3'] ;
 
 handleDelete = name => 
 this.setState(s => ( items: s.items.filter(x => x !== name) ));
 

 render() 
 return (
 <ul>this.state.items.map(x =>
 <li>x&nbsp;
 <button onClick=() => this.handleDelete(x)>Delete</button>
 </li>
 )</ul>
 );
 


ReactDOM.render(<Demo />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

If you do not want to generate a delete function for each item and handle the deletion in a single function, you will have to add an id of some kind to your items to identify them. Then you can attach this id to the button using a data attribute and get this id from the event.target in the handler:

class Demo extends React.Component 
 state = 
 items: [
 id: 1, content: 'Item 1' ,
 id: 2, content: 'Item 2' ,
 id: 3, content: 'Item 3' 
 ]
 ;
 
 handleDelete = e => 
 const id = +e.target.getAttribute('data-id');
 this.setState(s => ( items: s.items.filter(x => x.id !== id) ));
 

 render() 
 return (
 <ul>this.state.items.map(( id, content ) =>
 <li key=id>content&nbsp;
 <button data-id=id onClick=this.handleDelete>Delete</button>
 </li>
 )</ul>
 );
 


ReactDOM.render(<Demo />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

share|improve this answer

edited Mar 20 at 16:21

answered Mar 9 at 9:13

jo_vajo_va

9,48621032

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  is there any other way than this that more efficient? I heard that putting an arrow function inside each element of array like that is costly, because you generate a function for each element instead of generate one function that can handle each element.
  
  – Kevin Chandra
  Mar 20 at 16:07
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Kevin Chandra, I would suggest to not worry about this until you do have performance problems, passing functions around is something that is done everywhere in functional languages.
  
  – jo_va
  Mar 20 at 16:11
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Sure, but I still want to know if there any other solution
  
  – Kevin Chandra
  Mar 20 at 16:16
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Kevin Chandra, I will update my answer and add a snippet for another way to do it
  
  – jo_va
  Mar 20 at 16:18
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thanks for the other solution, however that is the same solution from GermaVinsmoke. Actually I heard the other solution is to wrap the button with some other component which has a prop of the element's id or content and also a prop of the function to handle it which is handleDelete in this case. But still, I only grasp the concept of it.
  
  – Kevin Chandra
  Mar 20 at 16:28
  

  
  
  
  

 | 
show 1 more comment

Use Array.map() to generate your items and attach an onClick handler like this:

class Demo extends React.Component 
 state = items: ['Item 1', 'Item 2', 'Item 3'] ;
 
 handleDelete = name => 
 this.setState(s => ( items: s.items.filter(x => x !== name) ));
 

 render() 
 return (
 <ul>this.state.items.map(x =>
 <li>x&nbsp;
 <button onClick=() => this.handleDelete(x)>Delete</button>
 </li>
 )</ul>
 );
 


ReactDOM.render(<Demo />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

If you do not want to generate a delete function for each item and handle the deletion in a single function, you will have to add an id of some kind to your items to identify them. Then you can attach this id to the button using a data attribute and get this id from the event.target in the handler:

class Demo extends React.Component 
 state = 
 items: [
 id: 1, content: 'Item 1' ,
 id: 2, content: 'Item 2' ,
 id: 3, content: 'Item 3' 
 ]
 ;
 
 handleDelete = e => 
 const id = +e.target.getAttribute('data-id');
 this.setState(s => ( items: s.items.filter(x => x.id !== id) ));
 

 render() 
 return (
 <ul>this.state.items.map(( id, content ) =>
 <li key=id>content&nbsp;
 <button data-id=id onClick=this.handleDelete>Delete</button>
 </li>
 )</ul>
 );
 


ReactDOM.render(<Demo />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

share|improve this answer

edited Mar 20 at 16:21

answered Mar 9 at 9:13

jo_vajo_va

9,48621032

class Demo extends React.Component 
 state = items: ['Item 1', 'Item 2', 'Item 3'] ;
 
 handleDelete = name => 
 this.setState(s => ( items: s.items.filter(x => x !== name) ));
 

 render() 
 return (
 <ul>this.state.items.map(x =>
 <li>x&nbsp;
 <button onClick=() => this.handleDelete(x)>Delete</button>
 </li>
 )</ul>
 );
 


ReactDOM.render(<Demo />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

class Demo extends React.Component 
 state = 
 items: [
 id: 1, content: 'Item 1' ,
 id: 2, content: 'Item 2' ,
 id: 3, content: 'Item 3' 
 ]
 ;
 
 handleDelete = e => 
 const id = +e.target.getAttribute('data-id');
 this.setState(s => ( items: s.items.filter(x => x.id !== id) ));
 

 render() 
 return (
 <ul>this.state.items.map(( id, content ) =>
 <li key=id>content&nbsp;
 <button data-id=id onClick=this.handleDelete>Delete</button>
 </li>
 )</ul>
 );
 


ReactDOM.render(<Demo />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

class Demo extends React.Component 
 state = items: ['Item 1', 'Item 2', 'Item 3'] ;
 
 handleDelete = name => 
 this.setState(s => ( items: s.items.filter(x => x !== name) ));
 

 render() 
 return (
 <ul>this.state.items.map(x =>
 <li>x&nbsp;
 <button onClick=() => this.handleDelete(x)>Delete</button>
 </li>
 )</ul>
 );
 


ReactDOM.render(<Demo />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

class Demo extends React.Component 
 state = items: ['Item 1', 'Item 2', 'Item 3'] ;
 
 handleDelete = name => 
 this.setState(s => ( items: s.items.filter(x => x !== name) ));
 

 render() 
 return (
 <ul>this.state.items.map(x =>
 <li>x&nbsp;
 <button onClick=() => this.handleDelete(x)>Delete</button>
 </li>
 )</ul>
 );
 


ReactDOM.render(<Demo />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

class Demo extends React.Component 
 state = 
 items: [
 id: 1, content: 'Item 1' ,
 id: 2, content: 'Item 2' ,
 id: 3, content: 'Item 3' 
 ]
 ;
 
 handleDelete = e => 
 const id = +e.target.getAttribute('data-id');
 this.setState(s => ( items: s.items.filter(x => x.id !== id) ));
 

 render() 
 return (
 <ul>this.state.items.map(( id, content ) =>
 <li key=id>content&nbsp;
 <button data-id=id onClick=this.handleDelete>Delete</button>
 </li>
 )</ul>
 );
 


ReactDOM.render(<Demo />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

class Demo extends React.Component 
 state = 
 items: [
 id: 1, content: 'Item 1' ,
 id: 2, content: 'Item 2' ,
 id: 3, content: 'Item 3' 
 ]
 ;
 
 handleDelete = e => 
 const id = +e.target.getAttribute('data-id');
 this.setState(s => ( items: s.items.filter(x => x.id !== id) ));
 

 render() 
 return (
 <ul>this.state.items.map(( id, content ) =>
 <li key=id>content&nbsp;
 <button data-id=id onClick=this.handleDelete>Delete</button>
 </li>
 )</ul>
 );
 


ReactDOM.render(<Demo />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

share|improve this answer

edited Mar 20 at 16:21

answered Mar 9 at 9:13

jo_vajo_va

9,48621032

answered Mar 9 at 9:13

jo_vajo_va

9,48621032

answered Mar 9 at 9:13

jo_vajo_va

9,48621032

0

You can give id properties to your button element based on id from li element, and use that id when referring the item that want to be deleted.

share|improve this answer

answered Mar 9 at 9:11

Kevin ChandraKevin Chandra

2517

add a comment | 

0

You can give id properties to your button element based on id from li element, and use that id when referring the item that want to be deleted.

share|improve this answer

answered Mar 9 at 9:11

Kevin ChandraKevin Chandra

2517

add a comment | 

You can give id properties to your button element based on id from li element, and use that id when referring the item that want to be deleted.

share|improve this answer

answered Mar 9 at 9:11

Kevin ChandraKevin Chandra

2517

share|improve this answer

answered Mar 9 at 9:11

Kevin ChandraKevin Chandra

2517

answered Mar 9 at 9:11

Kevin ChandraKevin Chandra

2517

answered Mar 9 at 9:11

Kevin ChandraKevin Chandra

2517