Render a property of an object, within array, inside React Component's state

Question

I'm trying to pass and array of objects, fetched fro get request, to component's state, which has an array. I can successfully pass an array of numbers, or really anything but objects cause when i do that i recieve this: error_image.png

Check out my .js files below, thanks.

comment_item.js :

import React from 'react';
import axios from 'axios';

export class CommentItem extends React.Component {
  constructor(props) {
    super(props);

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

componentWillMount() {
  axios.get('api/v1/trip/2/comment/')
    .then(response => {
      const comments = [{a: 2, b: 4}, {a: 1, b: 3}]; //response.data should be here, but for your convenience I've put array of objects
      this.setState({comments});
    });
}

render() {
    return (
      <div>
        <ul>
            <li>
                {this.state.comments[0].a}
            </li>
        </ul>
      </div>
    );
  }
}

comment.js :

import React from 'react';

import Paper from 'material-ui/Paper';
import Divider from 'material-ui/Divider';
import List from 'material-ui/List/List';

import {CommentItem} from './comment_item';
import {CommentForm} from './comment_form';

const styles = {
  paper: {
      paddingLeft: 15,
      paddingRight: 15,
      paddingBottom: 15,

      marginLeft: 15,
      marginRight: 15,
      marginBottom: 15
  },

  divider: {
      backgroundColor: 'grey'
  }

};

export default class Comment extends React.Component {
    render() {
        return (
            <Paper zDepth={5} rounded={false} style={styles.paper}>
                <div>
                    <List>
                        <CommentItem />
                    </List>

                    <Divider style={styles.divider}/>
                    <CommentForm/>
                </div>
            </Paper>
        );
    }
}

kind user · Accepted Answer · 2017-07-30 15:55:43Z

1

While rendering, this.state.comments isn't yet available, that's why you are getting undefined error. Try to add a condition, which will tell react to render given comment only if the state.comments variable is available.

<li>
   { this.state.comments.length ? this.state.comments[0].a : null }
</li>

edited Jul 30, 2017 at 15:55

answered Jul 30, 2017 at 15:39

kind user

42k8 gold badges69 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Roman Over a year ago

First of all thanks for your reply :) I've tried to copy-paste your answer into my code and refresh the page, but I get the exact same error as before. Could you please explain me how it works, maybe I have to change something else too.

kind user Over a year ago

@Roman Strange. That's the only place where you are using that variable. If it's empty it shouldn't display anything and if it's not - it should render proper value. Please try to clear your cache and restart your app.

Mayank Shukla Over a year ago

i think it should be this.state.comments.length ? ...... because initial value is [] :)

kind user Over a year ago

@MayankShukla Yep, I've missed the default value of that variable, thanks!

Shubham Khatri · Accepted Answer · 2017-07-30 15:53:14Z

0

The problem is that the data this.state.comments[0] isn't available when you try to use it. So you need to perform a check before you use it

render() {
    return (
      <div>
        <ul>
            <li>
                {this.state.comments[0]? this.state.comments[0].a: ''}
            </li>
        </ul>
      </div>
    );
  }
}

However I think your would like to map over the comments instead of displaying it. You could do it like

render() {
    return (
      <div>
        <ul>
            <li>
                {this.state.comments && this.state.comments.map((comment) => {
                    <li>{comment.a}</li>
                })}
            </li>
        </ul>
      </div>
    );
  }
}

answered Jul 30, 2017 at 15:53

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Comments

Mayank Shukla · Accepted Answer · 2017-07-30 15:56:18Z

0

make sure you're checking comments and length too, like so -

(this.state.comments && this.state.comments.length > 0) ? 
    this.state.comments[0].a : null

edited Jul 30, 2017 at 15:56

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

answered Jul 30, 2017 at 15:55

grgmo

1,0158 silver badges17 bronze badges

Collectives™ on Stack Overflow

Render a property of an object, within array, inside React Component's state

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related