React Native displaying nested array items

Question

The following code is for a single post, axios fetches the current post ID and stores the result in post array. Keep in mind, only ONE post is stored since this is fetching a single post. The ID and date display properly but if I try to display nested items like rendered content it doesn't work.

Here is what the API json result looks like:

    constructor(props) {
    super(props);

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

getPost() {
    axios
      .get('single_post_api')
      .then(response => {
        this.setState({
          post: response.data
        });
      });
}

componentDidMount() {    
    this.getPost();
  }

render() {
const data = this.state.post;

  return ( 
  <View>    
          <Text>{data.date}</Text>
          <Text>{data.slug}</Text>

///Neither of these work///
          <Text>{data.content.rendered}</Text>
          <Text>{data.content[0]}</Text>
////////////////////////////

  </View>
  );
}

In the data content.rendered is html, you cannot do <div>{content.rendered}</div> but have to do it the way I mentioned earlier (because of xss attack). You could try <pre>{JSON.sringify(data,undefined,2)}</pre> and see where you are doing something wrong. — HMR
– HMR, Commented Sep 15, 2019 at 17:05

Merkle Groot · Accepted Answer · 2019-09-15 17:11:40Z

2

Try this.

render() {
  // If we run into a null, just render it as if we had an empty array.
  const posts = (this.state ?? this.state.posts) ? this.state.posts : [];

  return ( 
    <View>
      (posts.map((post, index) => (
        <View key={index}>
          <Text>{post.date}</Text>
          <Text>{post.slug}</Text>
          <Text>{post.content ? post.content.rendered : ""}</Text>
        </View>
      ));
  </View>
  );
}

edited Sep 15, 2019 at 17:11

answered Sep 15, 2019 at 16:47

Merkle Groot

9365 silver badges10 bronze badges

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

6 Comments

Brayden Over a year ago

const data = this.state.post; was a spelling mistake for this question, I have fixed it in the question. I added [response.data] but I still can't display the nested items.

Merkle Groot Over a year ago

Gotcha. I've modified my original answer.

Brayden Over a year ago

This code works, just curious why I can't just put {post.content.rendered} , why do I need this before it: {post.content ? post.content.rendered : ""}

Merkle Groot Over a year ago

You could probably do {post.content.rendered} and be just fine. However, if post.content were ever null, it would throw an exception.

Brayden Over a year ago

I get "Undefined is not an object" error if I do it that way, even though it's the exact same post and it displays properly with {post.content ? post.content.rendered : ""}

|

Collectives™ on Stack Overflow

React Native displaying nested array items

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related