React Component receiving incorrect prop value

Question

I have a Modal component and a Form component. Modal is a functional component whereas Form is a class component because that's where I'm handling the form submission.

Modal [the parent] passes all of its props to Form. There are three values in Modal's props object, two strings and a number.

String values are as expected, but the number (meant to serve as an id) is coming as 1, instead of the expected 10 (in this case). This is a problem because I'm trying to save that value into state, and am not getting the value I'm expecting.

Peculiarly, if I console.log(this.props) inside render(), props object is printed twice; first time number value is 1, second time it's 10. This happens upon the component's initial render, without any changes happening to state.

Why is this happening and how do I get the actual value I'm expecting?

---

This is the Modal Component.

import React from 'react';
import Form from './Form';


const Modal = (props) => (
  <div className="modal fade" id="createWorkitem" tabIndex="-1" role="dialog" aria-labelledby="createWorkitemLabel" aria-hidden="true">
    <div className="modal-dialog" role="document">
      <div className="modal-content">
        <div className="modal-header">
          <h5 className="modal-title" id="createWorkitemLabel">
            {/* 10 */}
            Item #{ props.issueNumber }
          </h5>
          <button type="button" className="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div className="modal-body">
          {/* Form needs props to POST */}
          <Form
            {...props}
          />
        </div>
      </div>
    </div>
  </div>
);

export default Modal;

And this is the Form Component

import React, { Component } from 'react';
import axios from 'axios';
import config from '../../../../../config';
const { create_issue_url } = config.init();

class Form extends Component {
  constructor(props) {
    super(props);
    this.state = {
      issueNumber: '',
      title: '',
      price: '',
      duration: '',
      description: ''
    }

    this.handleChange = this.handleChange.bind(this);
    this.submitForm = this.submitForm.bind(this);
    this.resetForm = this.resetForm.bind(this);
  }

  componentWillMount() {
    // this prints once with wrong value
    console.log(this.props);
  }

   componentDidMount() {
    // this prints once with wrong value
    console.log(this.props);
    // this prints once with right value inside props object
    console.log(this);
  }

  handleChange(e) {
    this.setState({[e.target.id]: e.target.value});
  }

  submitForm(e) {
    e.preventDefault();
    let endpoint = `${create_issue_url}/${this.props.repo}`;
    let msg = 'Are you sure you want to create this item?';
    // Make sure
    if(confirm(msg)) {
      axios.post(endpoint, this.state)
      .then(response => {
        console.log(response.data.workitem);
        // Clear form
        this.resetForm();
        // Show success alert
        document.getElementById('successAlert').style.display = '';
        // Hide it after 3 seconds
        setTimeout(function hideAlert(){
          document.getElementById('successAlert').style.display = 'none';
        }, 3000);
      })
      .catch(err => {
        console.log(err);
      });
    }
  }

  resetForm() {
    this.setState({
      title: '',
      price: '',
      duration: '',
      description: ''
    });
  }

  render() {
    let { title, price, duration, description } = this.state;
    // this prints twice
    {console.log(this.props.issueNumber)}
    return (
      <form onSubmit={this.submitForm}>
        <div id="successAlert" className="alert alert-success" role="alert"
          style={{display: 'none'}}
        >
          Item created.
        </div>
        <div className="form-row">
          <div className="form-group col-md-6">
            <label htmlFor="title">Title</label>
            <input onChange={this.handleChange} type="text" value={title} className="form-control" id="title" required/>
          </div>
          <div className="form-group col-md-3">
            <label htmlFor="price">Price</label>
            <input onChange={this.handleChange} type="number" value={price} className="form-control" id="price" required/>
          </div>
          <div className="form-group col-md-3">
            <label htmlFor="duration">Duration</label>
            <input onChange={this.handleChange} type="number" value={duration} className="form-control" id="duration"
              placeholder="days" required
            />
          </div>
        </div>
        <div className="form-group">
          <label htmlFor="description">Description</label>
          <textarea
            onChange={this.handleChange} 
            className="form-control"
            id="description"
            style={{overflow: 'auto', resize: 'none'}}
            value={description}
            required
          ></textarea>
        </div>
        {/* Using modal footer as form footer because it works */}
        <div className="modal-footer">
          <button type="submit" className="btn btn-primary">Submit</button>
          <button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </form>
    ); 
  }

}

export default Form;

Answer 1

Behaviour is just correct. On load your modal component is receiving props as 1. and later it is changed to 10. So your components are updated once value is changed to 10. componentDidMount will be invoked only once during initial mounting. But componentDidUpdate and render will be called whenever component updates ie receives an updated prop(in your case issuenumber 10).

So render will be called twice initially with 1 as prop value and then 10. but componentDidMount will be called only once(when prop value is 1)

Now the problem of printing console.log(this) vs console.log(this.props) in componentDidMount. First case shows issuenumber prop is 10 and second case shows it as 1. I suspect this is because chrome developer tools is optimising the print using live update. When you are printing this obviously prop was 1, however I feel like console is live updating that print(as very soon that object is updated with new props)

Console.log showing only the updated version of the object printed

As suggested here instead of console.log(this) try console.log(JSON.parse(JSON.stringify(this))); this should print 1

Hope this clears the question.