I have a list of records. Each record has a button that sends the current records id to a toggle function for editing. The function receives the id of the record, but when it tries to set a state value using that id, it returns null. I need it for use in another functions, the handleEditField() and handleEditItem() functions.
import React, { Component, PropTypes} from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import { reduxForm } from 'redux-form';
import { updateTerritoryGeography } from '../actions/index.js';
import { getTerritoryGeographies, deleteTerritoryGeography } from '../actions/index';
import TerritoryTabs from './territory-tabs';
class TerritoryGeographyList extends Component {
constructor(props) {
super(props);
this.state = {
editing: null
};
this.toggleEditing = this.toggleEditing.bind(this);
}
componentWillMount() {
this.props.getTerritoryGeographies(this.props.params.id);
this.setState({editing : null});
}
toggleEditing( recordId ) {
console.log("the current id of the record being edited");
console.log( recordId );
this.setState({editing : recordId});
console.log("the editing value from state")
console.log(this.state.editing);
}
// used when a single field is edited and enter is pressed
handleEditField( event ) {
if ( event.keyCode === 13) {
console.log("handleEditField");
console.log(event);
let target = event.target,
update = {};
console.log("state value being called int handleEditField()");
console.log(this.state.editing);
update.id = this.state.editing;
update[ target.name ] = target.value;
this.updateTerritoryGeography( update, update.id );
}
}
// used when multiple fields are edited
handleEditItem() {
let itemId = this.state.editing;
this.updateTerritoryGeography({
tpslead__Country__c: this.refs[ `Country_${ itemId }`].value,
tpslead__State__c: this.refs[ `State/Province_${ itemId }`].value,
tpslead__Zip_Start__c: this.refs[ `Postal_Start_${ itemId }`].value,
tpslead__Zip_End__c: this.refs[ `Postal_End_${ itemId }`].value
}, itemId)
}
onDeleteClick(id) {
this.props.deleteTerritoryGeography(id);
}
static contextTypes = {
router: PropTypes.object
}
return this.props.territoryGeographies.map((geography) => {
// edit mode
if (this.state.editing === geography.Id ) {
return (
<tr key={ geography.Id }>
<th scope="row" data-label="Country">
<div className="slds-truncate">
<input onKeyDown={ this.handleEditField }
className="slds-input inline"
type="text"
ref={`Country_${geography.Id}`}
title="Country"
defaultValue={geography.tpslead__Country__c}
/>
</div>
</th>
<td data-label="State/Provice">
<div className="slds-truncate">
<input onKeyDown={ this.handleEditField}
className="slds-input"
type="text"
ref={`State/Province_${geography.Id}`}
title="State/Province"
defaultValue={geography.tpslead__State__c}
/>
</div>
</td>
<td data-label="Postal Start">
<div className="slds-truncate">
<input onKeyDown={ this.handleEditField}
className="slds-input"
type="text"
ref={`Postal_Start_${geography.Id}`}
title="Postal Start"
defaultValue={geography.tpslead__Zip_Start__c}
/>
</div>
</td>
<td data-label="Postal End">
<div className="slds-truncate">
<input onKeyDown={ this.handleEditField}
className="slds-input"
type="text"
ref={`Postal_End_${geography.Id}`}
title="Postal End"
defaultValue={geography.tpslead__Zip_End__c}
/>
</div>
</td>
<td className="slds-text-align--right" data-label="Action">
<button onClick={this.handleEditItem} className="slds-button slds-button--icon" title="edit">
<svg className="slds-button__icon" aria-hidden="true">
<use xlinkHref={checkIcon}></use>
</svg>
<span className="slds-assistive-text">Update</span>
</button>
<button onClick={ this.toggleEditing.bind(null, geography.Id)} className="slds-button slds-button--icon" title="delete" data-aljs="modal" data-aljs-show="PromptConfirmDelete">
<svg className="slds-button__icon" aria-hidden="true">
<use xlinkHref={closeIcon}></use>
</svg>
<span className="slds-assistive-text">Cancel</span>
</button>
</td>
</tr>
);
}
// view mode
else {
return (
<tr key={geography.Id} onClick={ this.toggleEditing.bind(null, geography.Id) }>
<th scope="row" data-label="Country">
<div className="slds-truncate">{geography.tpslead__Country__c}</div>
</th>
<td data-label="State/Provice">
<div className="slds-truncate">{geography.tpslead__State__c}</div>
</td>
<td data-label="Postal Start">
<div className="slds-truncate">{geography.tpslead__Zip_Start__c}</div>
</td>
<td data-label="Postal End">
<div className="slds-truncate">{geography.tpslead__Zip_End__c}</div>
</td>
<td className="slds-text-align--right" data-label="Action">
<button onClick={ this.toggleEditing.bind(null, geography.Id)} className="slds-button slds-button--icon" title="edit">
<svg className="slds-button__icon" aria-hidden="true">
<use xlinkHref={editIcon}></use>
</svg>
<span className="slds-assistive-text">Edit</span>
</button>
<button onClick={() => this.onDeleteClick(geography.Id)} className="slds-button slds-button--icon" title="delete" data-aljs="modal" data-aljs-show="PromptConfirmDelete">
<svg className="slds-button__icon" aria-hidden="true">
<use xlinkHref={deleteIcon}></use>
</svg>
<span className="slds-assistive-text">Delete</span>
</button>
</td>
</tr>
);
}
});
}
render() {
return (
<TerritoryTabs id={this.props.params.id} listTab="geography">
<Link to={"territory/" + this.props.params.id + "/geography/new"} className="slds-button slds-button--brand">
Add New Geography
</Link>
<table className="slds-table slds-table--bordered slds-table--cell-buffer slds-m-top--large">
<thead>
<tr className="slds-text-title--caps">
<th scope="col">
<div className="slds-truncate" title="Country">Country</div>
</th>
<th scope="col">
<div className="slds-truncate" title="State/Provice">State/Provice</div>
</th>
<th scope="col">
<div className="slds-truncate" title="Postal Start">Postal Start</div>
</th>
<th scope="col">
<div className="slds-truncate" title="Postal End">Postal End</div>
</th>
<th className="slds-text-align--right" scope="col">
<div className="slds-truncate" title="Action">Action</div>
</th>
</tr>
</thead>
<tbody>
{this.renderTerritoryGeographyList()}
</tbody>
</table>
</TerritoryTabs>
);
}
}
function mapStateToProps(state) {
console.log(state);
return { territoryGeographies: state.territoryGeographies.all
};
}
export default connect(mapStateToProps, { getTerritoryGeographies, deleteTerritoryGeography, updateTerritoryGeography })(TerritoryGeographyList);
Here is a screenshot from the console.
