MapMarker does not update description onPress immediately
I am trying to learn how to use React Native maps and I am trying to add in custom Map Markers. For some reason, when I try to use the following code, the image updates properly but the description does not update properly until the second click. The first click will show "not selected" but clicking on the same marker will show the actual text I want. How can I fix this?
Since the image is updating to the newImage, I know
this.state.selectedMarkerIndex === i
but the same equality does not apply to description for some reason?
state = {busText:}
fetchData=(i, index)=>{
fetch('LINK TO GET BUSES'+ i.toString() + '/buses', {method:'GET'})
.then((response) => response.json())
.then((responseJson) => {
this.setState({
selectedMarkerIndex: index,
busText: responseJson
},
()=>{
console.log("selected index: " + this.state.selectedMarkerIndex)
}
)
console.log(JSON.stringify(this.state.busText));
console.log("_______________________________________________________");
})
}
renderMarkers = ()=>{
return busStops.stops.map((stop, i) => {
return <Marker marker
key={ `${i}` }
coordinate={{latitude: stop.location.latitude, longitude: stop.location.longitude}}
title = {stop.stopName}
image = {this.state.selectedMarkerIndex === i ? newImage : busStopImage}
description={this.state.selectedMarkerIndex === i ? JSON.stringify(this.state.busText) : "not selected"}
onPress={() => {
this.fetchData(stop.stopID, i)
console.log(this.state.selectedMarkerIndex + "i :" + i)
}
}
/>
})
}
I expect the description of the MapMarker to be updated when I click on it with what is fetched but that is not occurring.
reactjs react-native
asked Jan 18 at 22:48
JohnnyDKJohnnyDK
11
add a comment |
I am trying to learn how to use React Native maps and I am trying to add in custom Map Markers. For some reason, when I try to use the following code, the image updates properly but the description does not update properly until the second click. The first click will show "not selected" but clicking on the same marker will show the actual text I want. How can I fix this?
Since the image is updating to the newImage, I know
this.state.selectedMarkerIndex === i
but the same equality does not apply to description for some reason?
state = {busText:}
fetchData=(i, index)=>{
fetch('LINK TO GET BUSES'+ i.toString() + '/buses', {method:'GET'})
.then((response) => response.json())
.then((responseJson) => {
this.setState({
selectedMarkerIndex: index,
busText: responseJson
},
()=>{
console.log("selected index: " + this.state.selectedMarkerIndex)
}
)
console.log(JSON.stringify(this.state.busText));
console.log("_______________________________________________________");
})
}
renderMarkers = ()=>{
return busStops.stops.map((stop, i) => {
return <Marker marker
key={ `${i}` }
coordinate={{latitude: stop.location.latitude, longitude: stop.location.longitude}}
title = {stop.stopName}
image = {this.state.selectedMarkerIndex === i ? newImage : busStopImage}
description={this.state.selectedMarkerIndex === i ? JSON.stringify(this.state.busText) : "not selected"}
onPress={() => {
this.fetchData(stop.stopID, i)
console.log(this.state.selectedMarkerIndex + "i :" + i)
}
}
/>
})
}
I expect the description of the MapMarker to be updated when I click on it with what is fetched but that is not occurring.
reactjs react-native
asked Jan 18 at 22:48
JohnnyDKJohnnyDK
11
add a comment |
I am trying to learn how to use React Native maps and I am trying to add in custom Map Markers. For some reason, when I try to use the following code, the image updates properly but the description does not update properly until the second click. The first click will show "not selected" but clicking on the same marker will show the actual text I want. How can I fix this?
Since the image is updating to the newImage, I know
this.state.selectedMarkerIndex === i
but the same equality does not apply to description for some reason?
state = {busText:}
fetchData=(i, index)=>{
fetch('LINK TO GET BUSES'+ i.toString() + '/buses', {method:'GET'})
.then((response) => response.json())
.then((responseJson) => {
this.setState({
selectedMarkerIndex: index,
busText: responseJson
},
()=>{
console.log("selected index: " + this.state.selectedMarkerIndex)
}
)
console.log(JSON.stringify(this.state.busText));
console.log("_______________________________________________________");
})
}
renderMarkers = ()=>{
return busStops.stops.map((stop, i) => {
return <Marker marker
key={ `${i}` }
coordinate={{latitude: stop.location.latitude, longitude: stop.location.longitude}}
title = {stop.stopName}
image = {this.state.selectedMarkerIndex === i ? newImage : busStopImage}
description={this.state.selectedMarkerIndex === i ? JSON.stringify(this.state.busText) : "not selected"}
onPress={() => {
this.fetchData(stop.stopID, i)
console.log(this.state.selectedMarkerIndex + "i :" + i)
}
}
/>
})
}
I expect the description of the MapMarker to be updated when I click on it with what is fetched but that is not occurring.
reactjs react-native
asked Jan 18 at 22:48
JohnnyDKJohnnyDK
11
I am trying to learn how to use React Native maps and I am trying to add in custom Map Markers. For some reason, when I try to use the following code, the image updates properly but the description does not update properly until the second click. The first click will show "not selected" but clicking on the same marker will show the actual text I want. How can I fix this?
Since the image is updating to the newImage, I know
this.state.selectedMarkerIndex === i
but the same equality does not apply to description for some reason?
state = {busText:}
fetchData=(i, index)=>{
fetch('LINK TO GET BUSES'+ i.toString() + '/buses', {method:'GET'})
.then((response) => response.json())
.then((responseJson) => {
this.setState({
selectedMarkerIndex: index,
busText: responseJson
},
()=>{
console.log("selected index: " + this.state.selectedMarkerIndex)
}
)
console.log(JSON.stringify(this.state.busText));
console.log("_______________________________________________________");
})
}
renderMarkers = ()=>{
return busStops.stops.map((stop, i) => {
return <Marker marker
key={ `${i}` }
coordinate={{latitude: stop.location.latitude, longitude: stop.location.longitude}}
title = {stop.stopName}
image = {this.state.selectedMarkerIndex === i ? newImage : busStopImage}
description={this.state.selectedMarkerIndex === i ? JSON.stringify(this.state.busText) : "not selected"}
onPress={() => {
this.fetchData(stop.stopID, i)
console.log(this.state.selectedMarkerIndex + "i :" + i)
}
}
/>
})
}
I expect the description of the MapMarker to be updated when I click on it with what is fetched but that is not occurring.
reactjs react-native
reactjs react-native
asked Jan 18 at 22:48
JohnnyDKJohnnyDK
11
asked Jan 18 at 22:48
JohnnyDKJohnnyDK
11
edited Jan 19 at 6:02
JohnnyDK
asked Jan 18 at 22:48
JohnnyDKJohnnyDK
11
asked Jan 18 at 22:48
JohnnyDKJohnnyDK
11
asked Jan 18 at 22:48
JohnnyDKJohnnyDK
11
11
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
A couple of things: To guarantee execution after setState you'll need to put your
this.setState({busText: responseJson})
in the fetchData() callback. Even better, set busText state earlier, where you're setting selectedMarkerIndex state.
Also for what it's worth, if you're having response time issues, try dropping some of your console.log() calls. Native (especially iOS) gets bogged down by them.
answered Jan 18 at 23:00
steverstever
667411
I have changed it to where you suggested but the issue still persists. When I click on a marker, it still shows as "not selected" when it is selected.image = {this.state.selectedMarkerIndex === i ? newImage : busStopImage} description={this.state.selectedMarkerIndex === i ? JSON.stringify(this.state.busText) : "not selected"}They should both evaluatae to true but the second line (description) does not while image does evaluate to true for some reason.
– JohnnyDK
Jan 19 at 1:31
You've changed nothing. The code above is exactly the same. I thought your question wasThe first click will show "not selected" but clicking on the same marker will show the actual text I want. How can I fix this?
– stever
Jan 19 at 3:18
I am sorry. I made the changes on my editor and not here(changed it now). What you stated is my question. For some reason, The first click still shows "not selected" after trying what you initially suggested.
– JohnnyDK
Jan 19 at 6:04
It looks right to me. Is the behavior the same in both simulator and the device?
– stever
Jan 19 at 15:26
It is same in both.
– JohnnyDK
Jan 20 at 2:22
|
show 1 more comment
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54262401%2fmapmarker-does-not-update-description-onpress-immediately%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
A couple of things: To guarantee execution after setState you'll need to put your
this.setState({busText: responseJson})
in the fetchData() callback. Even better, set busText state earlier, where you're setting selectedMarkerIndex state.
Also for what it's worth, if you're having response time issues, try dropping some of your console.log() calls. Native (especially iOS) gets bogged down by them.
answered Jan 18 at 23:00
steverstever
667411
I have changed it to where you suggested but the issue still persists. When I click on a marker, it still shows as "not selected" when it is selected.image = {this.state.selectedMarkerIndex === i ? newImage : busStopImage} description={this.state.selectedMarkerIndex === i ? JSON.stringify(this.state.busText) : "not selected"}They should both evaluatae to true but the second line (description) does not while image does evaluate to true for some reason.
– JohnnyDK
Jan 19 at 1:31
You've changed nothing. The code above is exactly the same. I thought your question wasThe first click will show "not selected" but clicking on the same marker will show the actual text I want. How can I fix this?
– stever
Jan 19 at 3:18
I am sorry. I made the changes on my editor and not here(changed it now). What you stated is my question. For some reason, The first click still shows "not selected" after trying what you initially suggested.
– JohnnyDK
Jan 19 at 6:04
It looks right to me. Is the behavior the same in both simulator and the device?
– stever
Jan 19 at 15:26
It is same in both.
– JohnnyDK
Jan 20 at 2:22
|
show 1 more comment
A couple of things: To guarantee execution after setState you'll need to put your
this.setState({busText: responseJson})
in the fetchData() callback. Even better, set busText state earlier, where you're setting selectedMarkerIndex state.
Also for what it's worth, if you're having response time issues, try dropping some of your console.log() calls. Native (especially iOS) gets bogged down by them.
answered Jan 18 at 23:00
steverstever
667411
I have changed it to where you suggested but the issue still persists. When I click on a marker, it still shows as "not selected" when it is selected.image = {this.state.selectedMarkerIndex === i ? newImage : busStopImage} description={this.state.selectedMarkerIndex === i ? JSON.stringify(this.state.busText) : "not selected"}They should both evaluatae to true but the second line (description) does not while image does evaluate to true for some reason.
– JohnnyDK
Jan 19 at 1:31
You've changed nothing. The code above is exactly the same. I thought your question wasThe first click will show "not selected" but clicking on the same marker will show the actual text I want. How can I fix this?
– stever
Jan 19 at 3:18
I am sorry. I made the changes on my editor and not here(changed it now). What you stated is my question. For some reason, The first click still shows "not selected" after trying what you initially suggested.
– JohnnyDK
Jan 19 at 6:04
It looks right to me. Is the behavior the same in both simulator and the device?
– stever
Jan 19 at 15:26
It is same in both.
– JohnnyDK
Jan 20 at 2:22
|
show 1 more comment
A couple of things: To guarantee execution after setState you'll need to put your
this.setState({busText: responseJson})
in the fetchData() callback. Even better, set busText state earlier, where you're setting selectedMarkerIndex state.
Also for what it's worth, if you're having response time issues, try dropping some of your console.log() calls. Native (especially iOS) gets bogged down by them.
answered Jan 18 at 23:00
steverstever
667411
A couple of things: To guarantee execution after setState you'll need to put your
this.setState({busText: responseJson})
in the fetchData() callback. Even better, set busText state earlier, where you're setting selectedMarkerIndex state.
Also for what it's worth, if you're having response time issues, try dropping some of your console.log() calls. Native (especially iOS) gets bogged down by them.
answered Jan 18 at 23:00
steverstever
667411
answered Jan 18 at 23:00
steverstever
667411
answered Jan 18 at 23:00
steverstever
667411
answered Jan 18 at 23:00
steverstever
667411
667411
I have changed it to where you suggested but the issue still persists. When I click on a marker, it still shows as "not selected" when it is selected.image = {this.state.selectedMarkerIndex === i ? newImage : busStopImage} description={this.state.selectedMarkerIndex === i ? JSON.stringify(this.state.busText) : "not selected"}They should both evaluatae to true but the second line (description) does not while image does evaluate to true for some reason.
– JohnnyDK
Jan 19 at 1:31
You've changed nothing. The code above is exactly the same. I thought your question wasThe first click will show "not selected" but clicking on the same marker will show the actual text I want. How can I fix this?
– stever
Jan 19 at 3:18
I am sorry. I made the changes on my editor and not here(changed it now). What you stated is my question. For some reason, The first click still shows "not selected" after trying what you initially suggested.
– JohnnyDK
Jan 19 at 6:04
It looks right to me. Is the behavior the same in both simulator and the device?
– stever
Jan 19 at 15:26
It is same in both.
– JohnnyDK
Jan 20 at 2:22
|
show 1 more comment
I have changed it to where you suggested but the issue still persists. When I click on a marker, it still shows as "not selected" when it is selected.image = {this.state.selectedMarkerIndex === i ? newImage : busStopImage} description={this.state.selectedMarkerIndex === i ? JSON.stringify(this.state.busText) : "not selected"}They should both evaluatae to true but the second line (description) does not while image does evaluate to true for some reason.
– JohnnyDK
Jan 19 at 1:31
You've changed nothing. The code above is exactly the same. I thought your question wasThe first click will show "not selected" but clicking on the same marker will show the actual text I want. How can I fix this?
– stever
Jan 19 at 3:18
I am sorry. I made the changes on my editor and not here(changed it now). What you stated is my question. For some reason, The first click still shows "not selected" after trying what you initially suggested.
– JohnnyDK
Jan 19 at 6:04
It looks right to me. Is the behavior the same in both simulator and the device?
– stever
Jan 19 at 15:26
It is same in both.
– JohnnyDK
Jan 20 at 2:22
I have changed it to where you suggested but the issue still persists. When I click on a marker, it still shows as "not selected" when it is selected.
image = {this.state.selectedMarkerIndex === i ? newImage : busStopImage} description={this.state.selectedMarkerIndex === i ? JSON.stringify(this.state.busText) : "not selected"} They should both evaluatae to true but the second line (description) does not while image does evaluate to true for some reason.– JohnnyDK
Jan 19 at 1:31
I have changed it to where you suggested but the issue still persists. When I click on a marker, it still shows as "not selected" when it is selected.
image = {this.state.selectedMarkerIndex === i ? newImage : busStopImage} description={this.state.selectedMarkerIndex === i ? JSON.stringify(this.state.busText) : "not selected"} They should both evaluatae to true but the second line (description) does not while image does evaluate to true for some reason.– JohnnyDK
Jan 19 at 1:31
You've changed nothing. The code above is exactly the same. I thought your question was
The first click will show "not selected" but clicking on the same marker will show the actual text I want. How can I fix this?– stever
Jan 19 at 3:18
You've changed nothing. The code above is exactly the same. I thought your question was
The first click will show "not selected" but clicking on the same marker will show the actual text I want. How can I fix this?– stever
Jan 19 at 3:18
I am sorry. I made the changes on my editor and not here(changed it now). What you stated is my question. For some reason, The first click still shows "not selected" after trying what you initially suggested.
– JohnnyDK
Jan 19 at 6:04
I am sorry. I made the changes on my editor and not here(changed it now). What you stated is my question. For some reason, The first click still shows "not selected" after trying what you initially suggested.
– JohnnyDK
Jan 19 at 6:04
It looks right to me. Is the behavior the same in both simulator and the device?
– stever
Jan 19 at 15:26
It looks right to me. Is the behavior the same in both simulator and the device?
– stever
Jan 19 at 15:26
It is same in both.
– JohnnyDK
Jan 20 at 2:22
It is same in both.
– JohnnyDK
Jan 20 at 2:22
|
show 1 more comment
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54262401%2fmapmarker-does-not-update-description-onpress-immediately%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
