title: React JS Adding Remove button to each item
body: <p>I currently have a button at the bottom of the page which removes the item at the second index (position 1) when pressed i.e. James Johnson then George Brown.</p>
  
  <p>However I want to add this button to every item in the list so it removes the item at that index.</p>
  
  <p>Example,</p>
  
  <p>John Smith - Remove</p>
  
  <p>James Johnson - Remove</p>
  
  <p>George Brown - Remove</p>
  
  <p>Clicking the Remove button next to the name would remove that item.</p>
  
  <p><strong>friendsActions.js</strong></p>
  
  <pre><code>import * as f from '../constants'
  
  export const addFriend = ({ firstname, lastname }) =&gt; ({
    type: f.ADD_FRIEND,
    frienditem: {
      firstname,
      lastname,
    },  
  })
  
  export const removeFriend = ({ key }) =&gt; ({
     type: f.REMOVE_FRIEND,
    key,
  })
  </code></pre>
  
  <p><strong>friendsReducer.js</strong></p>
  
  <pre><code>import * as f from '../constants'
  
  const initialState = [
    { firstname: 'John', lastname: 'Smith' },
    { firstname: 'James', lastname: 'Johnson' },
    { firstname: 'George', lastname: 'Brown' },
   ]
  
  const friendsReducer = (state = initialState, action) =&gt; {
    switch (action.type) {
      case f.ADD_FRIEND:
        return [...state, action.frienditem] 
      case f.REMOVE_FRIEND:
        console.log('removing friend with key ' + action.key)
        return [...state.slice(0, action.key), ...state.slice(action.key + 1)]
      default:
         return state
    }
   }
  
  export default friendsReducer
  </code></pre>
  
  <p><strong>index.js (constants)</strong></p>
  
  <pre><code>export const ADD_FRIEND = 'ADD_FRIEND'
  export const REMOVE_FRIEND = 'REMOVE_FRIEND'
  friendsContainer.js
  
  import React from 'react'
  import Page from '../components/Page'
  
  import FriendList from '../containers/FriendList'
  
  import { css } from 'glamor'
  
  const FriendContainer = props =&gt; (
    &lt;Page title="Friends List" colour="blue"&gt;
      &lt;FriendList {...props} /&gt;
    &lt;/Page&gt;
  )
  
  export default FriendContainer
  </code></pre>
  
  <p><strong>friendsList.js</strong></p>
  
  <pre><code>import React from 'react'
  import { css } from 'glamor'
  
  const Friend = ({ firstname, lastname }) =&gt; (
    &lt;div&gt;
      &lt;ul&gt;
        &lt;li&gt;
          {firstname} {lastname}
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  )
  
  const FriendList = ({ friends, addFriend, removeFriend }) =&gt; (
    &lt;div&gt;
      &lt;div&gt;
        {friends.map((frn, i) =&gt; (
          &lt;Friend key={++i} firstname={frn.firstname} lastname={frn.lastname} /&gt;
        ))}
      &lt;/div&gt;
      &lt;button onClick={() =&gt; addFriend({ firstname: 'New', lastname: 'Friend' })}&gt;
        Add Friend
      &lt;/button&gt;
      &lt;button onClick={() =&gt; removeFriend({ key: 1 })}&gt;Remove Friend&lt;/button&gt;
    &lt;/div&gt;
  )
  
  export default FriendList
  </code></pre>