0

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:

enter image description here

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>
    )
  }
}
Ollie
  • 624
  • 8
  • 27

0 Answers0