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?