console.log(this) following by console.log(this.props) don't show same common values

Question

All is in the title. I am using :"react": "16.8.6"
console.log(this) is showing good information

line following: console.log(this.props) is showing not expected data different from the one in console.log(this)

The plugin React dev tools gives me same good information as console.log(this)
Not the same "this" in both case? How is it possible?

Answer 1

Here is my code. You can point at console.log(this.props) in the getPost method!

import React from 'react'
import { Container, Row, Col, Alert } from 'reactstrap'

const Api = require('../lib/Api.js')

class PageComponent extends React.Component {

  constructor(props) {
    super(props)

    this.state = {
      page: {
        id: props.match.params.id,
        content: ''
      },
      loading: true,
      flashMessage: {
        message: undefined,
        style: 'success'
      }
    }

  }

  render() {
    if (this.state.loading) {
      return null
    }

    return (
      <Container>
        <Row>
          <Col xs="12" md="12">

            {this.state.flashMessage.message &&
              <Container>
                <Row>
                  <Col xs="12" md="12">
                    <Alert color={this.state.flashMessage.style}>
                      {this.state.flashMessage.message}
                    </Alert>
                  </Col>
                </Row>
              </Container>
            }

            <div>{this.state.page.content}</div>

          </Col>
        </Row>
      </Container>
    )
  }

  componentDidMount() {
    this.getPage()
  }

  componentWillReceiveProps(nextProps) {

    let prevPageId = this.props.match.params.id
    let newPageId = nextProps.match.params.id

    // check if page component is being reloaded with new page props && reload page from Api
    if (prevPageId !== newPageId) {
      this.setState({
        page: {
          id: newPageId,
          content: ''
        }
      })
      this.getPage(newPageId)
    }
  }

  getPage(pageId = null) {
    pageId = pageId || this.state.page.id

    this.setState({
      loading: true,
      flashMessage: {
        message: undefined,
        style: 'success'
      }
    })
    console.log("from Page1")
    console.log(this)
    console.log(this.props)
    console.log(this.state)
    let jwt = this.props.appState.jwt
    console.log(jwt)

    Api.getPage(jwt, pageId).then(response => {
      if (response) {
        this.setState({
          page: response,
          loading: false
        })
      }
      else {
        this.setState({
          loading: false,
          flashMessage: {
            message: 'Access Denied.',
            style: 'danger'
          }
        })
      }
    })
  }



}

export default PageComponent

In console for console.log(this) I got:
PageComponent {props: {…}, context: {…}, refs: {…}, updater: {…}, state: {…}, …}
context: {}
props:
appState:
cookieName: "rails-react-token-auth-jwt"
email: "eric.london@example.com"
jwt:
"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE1NTkzODI3MTAsInN1YiI6MX0.hMSIIHK6jl3ftEkTCfbuVtgiUKjt-8dsfR2U-VAUjec"
pages: (4) [{…}, {…}, {…}, {…}]
user_id: 1

In console for console.log(this.props) I got:
appState:
cookieName: "rails-react-token-auth-jwt"
email: undefined
jwt: undefined
pages: []
user_id: undefined

Answer 2

OK...the former code is not mine and comes from:
https://github.com/EricLondon/Rails5-React-Token-Auth
I must say that code is working with old libraries
I did some refactoring because I don't trust "this" anymore from JS !!
Using Hooks and functions only code is much more readeable and 71 lines instead of 116 ! I am sold ....
New refactored code :

import React, { useState, useEffect } from 'react'
import { Container, Row, Col, Alert } from 'reactstrap'

const Api = require('../lib/Api.js')

export default function PageComponent(props)  {

  //states init n Hooks
  const [page, setPage] = useState({ id: props.match.params.id, content: ''})
  const [loading, setLoading] = useState(true)
  const [flashMessage, setFlashMessage] = useState({ message: undefined, style: 'success'})
  console.log(page.id)

  useEffect( () => {
    const pageId = props.match.params.id
    const getPage = () => {
      setLoading(true)
      setFlashMessage({
        message: undefined,
        style: 'success'
      })
      let jwt = props.appState.jwt
      console.log(jwt)

      Api.getPage(jwt, pageId).then(response => {
        if (response) {
          setPage(response)
          setLoading(false)
        }
        else {
          setPage({id:pageId, content: ''})
          setLoading(false)
          setFlashMessage({
            message: 'Access Denied.',
            style: 'danger'
          })
        }
      })
    }
    getPage()
  },[ props ])

  //rendering:

  if (loading) {
    return <div>Loading</div>
  }
  else {
    return (
      <Container>
        <Row>
          <Col xs="12" md="12">

            {flashMessage.message &&
              <Container>
                <Row>
                  <Col xs="12" md="12">
                    <Alert color={flashMessage.style}>
                      {flashMessage.message}
                    </Alert>
                  </Col>
                </Row>
              </Container>
            }

            <div>{page.content}</div>

          </Col>
        </Row>
      </Container>
    )}
}