CODEWITHSUNDEEP
javascriptreactjsmeteor
Randy
Randy

Reputation: 105

Cannot read property of undefined using componentWillMount in React with Meteor

I have not been able to figure out how to get around this error. I think it has something to do with using "bind" since this is ES6. I have tried adding .bind(this) to the end of the constructor. I have also tried replacing 'componentWillMount' with 'componentDidMount'. This is using meteor and react.

Error:

Uncaught TypeError: Cannot read property 'symbol' of undefined at Trades.render (Trades.jsx:9)

App.js

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = { trades: [] };
  };

  componentWillMount() {
    this.setState({ trades: [
      {
        _id: 1,
        symbol: "GOOG",
        shares: 25,
      },
      {
        _id: 2,
        symbol: "WMT",
        shares: 50,
      },
    ]});
  }.bind(this)

  renderTrades() {
    return this.state.trades.map((trade) => (
      <Trades key={trade._id} trade={trade} />
    ));
  }

  render() {
    return(
      <MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}>
          <div className="container">
              <div className="col s12 m4"><Trades />
              <h2>Trades</h2>
                <Divider/>
                  <List>
                    {this.renderTrades()}
                  </List>
                <Divider/>
            </div>
            </div>
          </div>
      </MuiThemeProvider>
    )
  }
}

Trades.js

  export default class Trades extends Component {
    render() {
      return (
        <ListItem
          primaryText={this.props.trade.symbol}
          leftAvatar={<Avatar src="img.jpg" />}
          />
      )
    }
  }

Upvotes: 0

Views: 1155

Answers (1)

Andrii Starusiev
Andrii Starusiev

Reputation: 7764

It's not good idea to use setState in componentWillMount (docs), use componentDidMount instead and check if your array is not empty in Trades component:

  componentDidMount() {
    this.setState({ trades: [
      {
        _id: 1,
        symbol: "GOOG",
        shares: 25,
      },
      {
        _id: 2,
        symbol: "WMT",
        shares: 50,
      },
    ]});
  }

 export default class Trades extends Component {
    render() {
      return (
        this.props.trade && this.props.trade.symbol? <ListItem
          primaryText={this.props.trade.symbol}
          leftAvatar={<Avatar src="img.jpg" />}
          /> : <div>loading...</div>

      )
    }
  }

Upvotes: 1

Related Questions