spinet of React native code and few questions regarding State and Props

Question

I am working on a React Native project that my manager wants me to teak a little bit even though I never worked with react or any web or mobile development. for the most part it's Been fun and I was able to make most of the changes needed, however I am struggling to understand some parts of the code if anyone can make thing a little bit clearer to me. My background is Java.

here I assume handleChange takes an object "updates" than update the state but I am confused of what "changes: {" is and those three dots...state.changes, ...updates,

handleChange = (updates) => {
    this.setState((state) => ({
      changes: {
        ...state.changes,
        ...updates,
      },
    }))
  }

here I assume mergedUser is unpacking two objects "this.props" and "this.state" to the variables swirly brackets then returning...userProfile, ...changes, again not sure what's the dots for and also it seems lile userProfile was inside homeStore that was inside screenProps?

get mergedUser() {
    const {screenProps: {homeStore: {userProfile}}} = this.props
    const {changes} = this.state

    return {
      ...userProfile,
      ...changes,
    }
  }

here it looks easy, a set the param TimerId and b try to access TimerId. but why there is "routes[0].routes[0].routes[0]" why not only this.props.navigation.state.TimerId

  a) this.props.navigation.setParams({TimerId})
  b) this.props.navigation.state.routes[0].routes[0].routes[0].TimerId

Lastly this one I have no idea of what's going on on it

export default class LogIn extends Component {
  static propTypes = {
    navigation: PropTypes.object.isRequired,
    screenProps: PropTypes.object.isRequired,
  }
  state = {
    email: '',
  }

Answer 1

handleChange = (updates) => {
    this.setState((state) => ({
      changes: {
        ...state.changes,
        ...updates,
      },
    }))
  }

Here is what this code do: You have a handleChange function that takes updates as an object. Then you call setState() function with your current state. changes is the key value in your state object that holds all the information as it seems. In changes, you spread all the values in changes object with spread operator... (three dots) and then spread all the values in updates to replace them. Because if your original state has a key/value pair and if you update your state without passing every key/pair in it (even if you don't change them) they will be removed from your state.

get mergedUser() {
    const {screenProps: {homeStore: {userProfile}}} = this.props
    const {changes} = this.state

    return {
      ...userProfile,
      ...changes,
    }
  }

In this code, you are destructuring your this.props and this.state objects. In Javascript ES2016, you can destructure your objects if you don't want you use them with. (dot) operator all the time. Lets say you have a person object:

let person = {name: 'Sam', age: 36};

You can destructure it and use this way:

let {name, age} = person;
console.log(name, age);

Instead of this way:

console.log(person.name, person.age);

I don't know about your third question but it's probably because of the router your project is using.

export default class LogIn extends Component {
  static propTypes = {
    navigation: PropTypes.object.isRequired,
    screenProps: PropTypes.object.isRequired,
  }
  state = {
    email: '',
  }

In this part, export default exports your code so you can use this component in a different component somewhere else. class LogIn extends Component with this code you create your LogIn component and inherit React.Component (in this code you probably have something like this in the beginning of the code: import React, {Component} from 'react'; The rest of the code is also probably some values for your router to make your users to be able to navigate between screens without refreshing the page.

Let me know if you need more information about React. I would be more than happy to help if it's in my knowledge:)