title: Passing props in React
body: <p>I'm afraid this is not going to be a well articulated question as I am somewhat new to React.</p>
  
  <p>I'm modifying the methods of a component SeqAlignmentChart, I'm making the following calls from within componentWillReceiveProps</p>
  
  <p>If I do "console.log(this)" I get </p>
  
  <p><a href="https://i.stack.imgur.com/2Pgm4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2Pgm4.png" alt="enter image description here"></a></p>
  
  <p>This all looks great.  However if I do "console.log(this.props)" I get </p>
  
  <p><a href="https://i.stack.imgur.com/rH6aa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rH6aa.png" alt="enter image description here"></a></p>
  
  <p>Note the 'data' field has gone from length 11 in "this" to length 1 in "this.props" while the 'width' property seems to have transferred. Apologies again for the formatting.  </p>
  
  <p>It seems very strange to me that when I print "this.props" I get a data object that doesn't contain the values I would be expecting.  Can anyone explain why 'console.log(this.props)' doesn't seem to be printing the same props as when I just do 'console.log(this)' ?  </p>
  
  <p>Thanks so much for any insight</p>
  
  <p>edit: here is the code for the component, not sure which parts are relevant for this</p>
  
  <pre><code>export default class SeqAlignmentChart extends React.Component {
    constructor(props) {
      super(props);
      this.state = {};
    }
  
    componentDidMount() {
      console.log("in mount component $$$$$$$$$$$$$$$$$$$$$");
      console.log(this);
      this.seqAlignmentChart = new SeqAlignmentVis(
        ReactDOM.findDOMNode(this),
        this.props.data,
        {
          width: this.props.width ? this.props.width - 15 : 1000 - 15,
          margin: { top: 10, right: 10, bottom: 10, left: 10 }
        }
      );
      this.seqAlignmentChart.render();
    }
  
    componentWillReceiveProps(nextProps) {
      console.log("!!!!!!!!!!!!!!!!!!!!!!!!!!");
      console.log(this);
      console.log(this.props);
      console.log(this.props.data[0]);
      console.log(this.props.data.length);
      if (this.props.data.length &gt; 1) {
        console.log("should rerender here ^^^^^^^^^^^^^^^^^^^^^^^^");
        this.componentDidMount();
      }
    }
  
    render() {}
  }
  </code></pre>