Remove Previous Table on click to new value

Question

Hi Please review the following code. I have a problem that i want to remove previous table when user click new value (it means hide previous table and show new table of new value). i have added image to understand problem. Robert Scheitlin, GISP‌ Rene Rubalcava‌ Kelly Hutchins‌ import React from 'react'; import { loadModules } from 'react-arcgis'; import Axios from 'axios'; export default class QueryODB extends React.Component{ constructor(props) { super(props); this.state = { ODB: [], server:[] } } componentDidMount(){ let map = this.props.map; let view = this.props.view; loadModules(["esri/tasks/support/Query", "esri/tasks/QueryTask", "esri/layers/FeatureLayer", 'esri/widgets/Expand', "esri/layers/GraphicsLayer", "esri/geometry/geometryEngine", "esri/Graphic", "esri/request", ]) .then(([Query, QueryTask, FeatureLayer, Expand, GraphicsLayer, geometryEngine, Graphic, Request]) => { /* view.ui.add( [ new Expand({ view:view, content: document.getElementById('attribute'), group: 'bottom-right', expanded: false }) ], "top-left" ) */ view.ui.add( [ new Expand({ view: view, content: document.getElementById("infoDiv"), group: "bottom-right", expanded: false, expandIconClass: "fas fa-object-group", }) ], "top-right" ); let OdbfromPOP = document.getElementById('odb-type'); const ODBRenderer = { type: "simple", // autocasts as new SimpleRenderer() symbol: { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() size: 6, color: [0, 255, 255], outline: null } }; /* const FiberRenderer = { type: "simple", // autocasts as new SimpleRenderer() symbol: { type: "simple-line", // autocasts as new SimpleLineSymbol() width: "2px", color: [0, 255, 255], outline: null } }; */ // *********** ODB Query *************** let odburl = "http://172.16.6.64:6080/arcgis/rest/services/KarachiSDE/FeatureServer/1"; let ODB = new FeatureLayer({ url: odburl, title: 'ODB/DC', renderer: ODBRenderer, listMode: "hide", popupTemplate: { title: "ODB/DC", content: [{ type: "fields", fieldInfos: [{ fieldName: "Name", label: "Name", format: { digitSeparator: true, places: 0 } }, { fieldName: "Splitter", label: "Splitter", format: { digitSeparator: true, places: 0 } }, { fieldName: "ID", label: "ID", format: { digitSeparator: false, places: 0 } }, { fieldName: "POP", label: "POP", format: { digitSeparator: false, places: 0 } }, { fieldName: "Placement", label: "Placement", format: { digitSeparator: true, places: 0 } }, { fieldName: "City", label: "City", format: { digitSeparator: true, places: 0 } }, { fieldName: "Comment", label: "Comment", format: { digitSeparator: true, places: 0 } }] }] } }) map.add(ODB) let queryTask = new QueryTask({ url: odburl }); var resultsLayer = new GraphicsLayer({ listMode: "hide" }); map.add(resultsLayer) view.when(() => { return ODB.when(function () { var query = ODB.createQuery(); return ODB.queryFeatures(query); }) }) .then(getValues) .then(getUniqueValues) .then(addToSelect) function getValues(response) { var features = response.features; var values = features.map((feature, index) => { return feature.attributes.POP; }); return values; } function getUniqueValues(values) { var uniqueValues = []; values.map((item, i) => { if ( (uniqueValues.length < 1 || uniqueValues.indexOf(item) === -1) && item !== "" ) { uniqueValues.push(item); } }); return uniqueValues; } function addToSelect(values) { values.sort(); values.map((value, index) => { var option = document.createElement("option"); option.text = value; OdbfromPOP.add(option); }); return setWellsDefinitionExpression(OdbfromPOP.value); } function setWellsDefinitionExpression(newValue) { ODB.definitionExpression = "POP = '" + newValue + "'"; let queryodb = new Query({ returnGeometry: true, outFields: ["Name", "ID", "Placement", "Comment", "POP"], where: ODB.definitionExpression }) queryTask.executeForCount(queryodb).then(function (results) { document.getElementById('results').innerHTML = " ODBs are " + results; }); queryTask.execute(queryodb).then(function (response) { var attribute = document.getElementById("attribute"); var table = document.createElement("table"); table.border = 1; var header = document.createElement("tr"); table.appendChild(header); response.fields.forEach(element => { var column = document.createElement("th"); column.textContent = element.alias; header.appendChild(column); //alert(response.data.fields.alias); }); response.features.forEach(res => { // console.log(response.features) var row = document.createElement("tr"); table.appendChild(row); response.fields.forEach(response => { //console.log(response.fields) var columns = document.createElement("td"); columns.textContent = res.attributes[response.name]; row.appendChild(columns); ///console.log(feature.attributes[field.name]) }) }) attribute.appendChild(table); }); } // set a new definitionExpression on the wells layer // and create a new buffer around the new wells OdbfromPOP.addEventListener("change", function (event) { let btn = document.getElementById('query-button'); btn.addEventListener('click', () => { let type = event.target.value; document.getElementById('pop').innerHTML = type setWellsDefinitionExpression(type) view.ui.add('attribute', "top-left") }) }); }) } render(){ return ( <div> <div id="infoDiv"> SELECT * FROM DC_ODB WHERE: <div> <strong>POP = <span id="pop"></span></strong></div> <select id="odb-type"> <option value = " ">...Unselect ODB...</option> </select><br /> <button id="query-button">Click to query</button><br /> <div id="results"></div> </div> <div id="attribute"></div> </div> ) } } ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ I select POP ID(21001) to show it's record on map as a table. it's working. when i select second POP ID (21004), the new table opens whereas old table does not disappear.

BenElan · Answer

You need to unmount your component:

componentWillUnmount() {

// clear the previous table here

}

Take a look at react's example: https://reactjs.org/docs/state-and-lifecycle.html

RobertScheitlin__GISP · Answer

Kawish,

Sorry I can not provide any advice about React code.