CODEWITHSUNDEEP
javascriptmeteorreactjsreact-router
sampereless
sampereless

Reputation: 321

React + Meteor: this.props is returning undefined

hello Idk why but i am trying to work with some static data and pass it around using props in my meteor and react project but cannot access the static data i created in the 'updates' variable.. can someone please help me understand why and fix this issue, thank you much appreciated:)

import React, { Component } from 'react';
import { default as UpdateCard } from '../components/UpdateCard.jsx';

let updates = {
    title: 'Replace Title A with B',
    content: 'Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis,   malesuada ultricies. Curabitur et ligula'
}

export default class UpdatesView extends Component {
    render() {
        console.log(this.props.updates);
        return (
            <div>
                <UpdateCard updates={this.props.updates}/>       
            </div>
        )
     }
}

Upvotes: 0

Views: 271

Answers (1)

nuway
nuway

Reputation: 2384

your code is running as expected. the variable you created with a let keyword is not a prop, but just a local variable. this.props.updates will return as undefined because

  • updates prop was not passed into UpdatesView component
  • no default values for updates props were specified on UpdatesView

try adding the following below the UpdatesView class, it would add default props to your components. 

    UpdatesView.defaultProps = {
      updates:  {
           title: 'Replace Title A with B',
           content: 'Lorem ipsum dolor sit amet enim. Etiam '
       }
    }

Upvotes: 1

Related Questions