title: React Navigation: receiving 'undefined' with this.props.navigation.state.params
body: <p>I have a strange problem when I am passing props down to another screen. </p>
  
  <p>I am passing two parameters; <code>title</code> and <code>body</code>, to ArticleBody screen.</p>
  
  <pre><code>class ListButtonWrapper extends React.Component {
    constructor(props){
      super(props);
      this.articleSelected = this.articleSelected.bind(this);
    }
  
    articleSelected() {
      this.props.navigation.navigate('ArticleBody', {
        title: this.props.title,
        body: this.props.body
      });
    }
  </code></pre>
  
  <p>When the button is pressed, it should pass those props to the next screen. And it does!</p>
  
  <pre><code>class ArticleBody extends React.Component {
  render() {
  
      const { params } = this.props.navigation.state;
      const { title } = params ? params.title : null;
      const { body } = params ? params.body : null;
      console.log(title, body, params.title, params.body);
      return (
        &lt;View&gt;
        &lt;Text&gt;Title: {title}&lt;/Text&gt;
        &lt;Text&gt;Body: {body}&lt;/Text&gt;
        &lt;/View&gt;
      );
  </code></pre>
  
  <p>However, calling <code>{title}</code> or <code>{body}</code> in <code>&lt;Text&gt;</code> doesn't show anything. Using console.log reveals that {title} and {body} are <em>undefined</em>. </p>
  
  <p>However! If I use <code>params.title</code> or <code>params.body</code>, both show up as they should. But, according to the documentation, calling <code>title</code> or <code>body</code> should work. </p>
  
  <p>But, here's another problem. If I change <code>const { title } = params ? params.title : null;</code> to <code>const { title } = params.title</code> it <em>still</em> shows up as undefined when I call <code>title</code></p>
  
  <p>I'm stumped. So far I can call <code>params.title</code> or <code>params.body</code> directly, but it should be working in the defined variables as well, right?</p>
  
  <p>What am I doing wrong?</p>
  
  <p><em>UPDATE</em></p>
  
  <p>Want to add a little update. If I console.log <code>this.props.navigation.state</code>, I see that the props are being passed down to ArticleBody. Here is the log:</p>
  
  <pre><code>{params: {…}, key: "id-1519274761934-2", routeName: "ArticleBody"}
  key: "id-1519274761934-2"
  params:
    body:"more stuff"
    title:"stuff"
  __proto__
  Object
  routeName:"ArticleBody"
  __proto__
  Object
  </code></pre>