Retrieve item index into list to delete

1

I'm trying to make a demo application for bookmarking (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.

But I can not retrieve the index of these items to exclude them from the state of my application. Here is my code below:

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 this?

    
asked by anonymous 25.05.2018 / 05:11

1 answer

0

You can do this:

1st - > Adds another property in your "list" as the index name.

2º - > Create a function that will call the action of remove 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 so it calls its function before firing the action of remove, it will remove the element from its list and then it will trigger the action remove:

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

So you will save your index in your reducer and you will be able to delete it later.

I hope to have helped my friend.

    
25.05.2018 / 18:18