Below is my app.js for a freshly created react native app. I am trying to modify lst
when mounting my component, mapping over it and changing the field show
.
My expectation is that componentDidMount
will execute synchronously, first logging the original list as shown:
[
{ show: false, src: 'pathtoimage1' },
{ show: false, src: 'pathtoimage2' }
]
Then, after this.modifyList(lst)
is called, the next log statement should be this:
[
{ show: true, src: 'pathtoimage1' },
{ show: true, src: 'pathtoimage2' }
]
However, when I execute the code I get two identical log entries:
Clearly I'm missing some basic understanding here. Can someone explain what is going on, where to read more and how to achieve my goal?
import React, { Component } from 'react';
import { Text, View } from 'react-native';
export default class App extends Component {
constructor(props) {
super(props);
}
modifyList = (mylist) => {
mylist.map((obj, idx) => {
mylist[idx].show = true;
});
}
componentDidMount() {
const lst = [
{ show: false, src: 'pathtoimage1' },
{ show: false, src: 'pathtoimage2' }
]
console.log("before function", lst);
this.modifyList(lst);
console.log("after function", lst);
}
render() {
return (
<View>
<Text>Welcome to this MWE</Text>
</View>
)
}
}