Recover item index in list to delete

Question

I’m trying to make a demo application for bookmark registration (Bookmarks). I can retrieve in a list what I type in the 3 inputs I have on my screen (Description, URL and tag), and I can include as many items as I want in this list.

However I cannot recover the index of these items to delete them from the state of my application. Below is my code:

Bookmarkform.js:

import React, {Component} from 'react'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import Grid from '../template/grid'
import {add, clear, changeDescription, changeUrl, changeTag} from 
'./bookmarkActions'
import IconButton from '../template/iconButton'

class BookmarkForm extends Component {

render(){
    const {description, url, nameTag} = this.props
    return (
        <div role='form' className='bookmarkForm'>
            <Grid cols='12 9 3'>
            <input id='description' className='form-control'
                    placeholder='Nome do favorito' type='text'
                        onChange={this.props.changeDescription}
                        value={this.props.description}></input>
            </Grid>

            <Grid cols='12 9 3'>
            <input id='url' className='form-control'
                    placeholder='URL' type='text'
                        onChange={this.props.changeUrl}
                        value={this.props.url}></input>
            </Grid>

            <Grid cols='12 9 3'>
            <input id='tag' className='form-control'
                    placeholder='Tags' type='text'
                        onChange={this.props.changeTag}
                        value={this.props.nameTag}></input>
            </Grid>

            <Grid cols='12 3 3'>
                <IconButton style='primary' icon='plus'
                    onClick={this.props.add}></IconButton>

                <IconButton style='default' icon='close'
                    onClick={this.props.clear}></IconButton>
            </Grid>
        </div>
      )
   }
}

const mapStateToProps = state => ({description: state.bookmark.description, 
url: state.bookmark.url , nametag: state.bookmark.nameTag})
const mapDispatchToProps = dispatch => bindActionCreators({add, clear, 
changeDescription, changeUrl, changeTag}, dispatch)

export default connect(mapStateToProps, mapDispatchToProps)(BookmarkForm)

Bookmarklist.js:

import React, {Component} from 'react'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'

import IconButton from '../template/iconButton'
import Tag from '../template/tag'
import {remove} from './bookmarkActions'

const BookmarkList = props => {

const renderRows = () => {
    const list = props.list || []
    return list.map((bookmark,index) => (
        <tr key={index}>
            <td>{bookmark.description}</td>
         <td><a href={'http://' + `${bookmark.url}`}>{bookmark.url}</a></td> 
            <td>{bookmark.nameTag}</td>
            <td>
                <IconButton style='danger' icon='trash-o'
                    onClick={props.remove}></IconButton>
            </td>
        </tr>
    ))
}

    return (
        <table className='table'>
            <thead>
                <tr>
                    <th>Nome</th>
                    <th>URL</th>
                    <th>Tags</th>
                    <th className='tableActions'>Ações</th>
                </tr>
            </thead>
            <tbody>
                {renderRows()}
            </tbody>
        </table>
    )
}


const mapStateToProps = state => ({list: state.bookmark.list})
const mapDispatchToProps = dispatch => bindActionCreators({remove}, 
dispatch)
export default connect(mapStateToProps, mapDispatchToProps)(BookmarkList)

Bookmarkactions.js:

export const changeDescription = (event) => ({
    type: 'DESCRIPTION_CHANGED',
    payload: event.target.value
})

export const changeUrl = (event) => ({
   type: 'URL_CHANGED',
   payload: event.target.value
})

export const changeTag = (event) => ({
   type: 'TAG_CHANGED',
   payload: event.target.value
})

export function add() {
    return {type: 'BOOKMARK_ADDED'}
}

export function remove() {
   return {type: 'BOOKMARK_REMOVED'}
}

export function clear() {
    return {type: 'BOOKMARK_CLEAR'}
}

Bookmarkreducer.js:

const INITIAL_STATE = {description: '', url: '', nameTag: '', list: [] }

export default (state = INITIAL_STATE, action) => {
switch(action.type) {
    case 'DESCRIPTION_CHANGED':
        return {...state, description: action.payload}
    case 'URL_CHANGED':
        return {...state, url: action.payload}
    case 'TAG_CHANGED':
        return {...state, nameTag: action.payload}
    case 'BOOKMARK_ADDED':
        return {...state, list: [...state.list, {description: state.description, url: state.url, nameTag: state.nameTag }]}
    case 'BOOKMARK_REMOVED':
        return {...state, list: []}
    case 'BOOKMARK_CLEAR':
        return {...state, description: '', url: '', nameTag: ''}
    default:
        return state
   }
}

How do I do it?

Answer 1

You can do it like this:

1º -> Add another property to your "list" as the index name.

2º -> Creates a function that will call the remove action by passing the index:

function Remove(indice){
  this.props.list.map(el => {
    if (el.indice === indice){
      this.props.list.splice(el, 1);
    }
  })
  () => props.remove;
}

3º -> You change the function of the delete button to call its function before you trigger the remove action, it will remove the element from your list and then it will fire the remove action:

return list.map((bookmark,index) => (
    <tr key={index}>
        <td>{bookmark.description}</td>
        <td><a href={'http://' + `${bookmark.url}`}>{bookmark.url}</a></td> 
        <td>{bookmark.nameTag}</td>
        <td><IconButton style='danger' icon='trash-o' onClick={() => this.Remove(bookmark.indice)}></IconButton></td>
    </tr>
))

This way you will save your index in your Address and you will be able to delete it later.

I hope I helped friend.