A loop in a loop of array of objects

Question

I have a JSON file for my data:

{
  "EIC": {
    "id": "EIC",
    "text": "Want to do a quick word game?",
    "replies": ["Sure", "Later"]
  },
  "YMB": {
    "id": "YMB",
    "text": "Okay, tomorrow. Cya!",
    "replies": ["bye Woebot"],
  }
}

I want to render the array of replies so we can see the different answers possible in the HTML.
Here's my component at the moment:

import React from 'react';
import axios from 'axios';
import style from "../styles/entry.css";

import * as allornothing from '../allornothing.json';

class EntryList extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      list: Object.values(allornothing)
    }
  }

  renderReplies(replies) {
    return replies.map((reply) => {
        return (
            <div class="entry-body col-12">
                <button class="back">{ reply }</button>
            </div>
        )
    })
  }

  render() {
    return (
      <div class="row" id="entries-list">
        {this.state.list.map(function(entry) {
          return (
            <div class="col-md-4 col-sm-12">
              <div class="entry col-12">
                <div class="row">
                  <div class="entry-header col-12">
                    <div class="entry-id">
                      <span>{entry.id}</span>
                    </div>
                    <p>{entry.text}</p>
                  </div>

                  { this.renderReplies(entry.replies) }

                  <div class="entry-manage col-12">
                    <div class="row">

                      <span class="manage-button">
                        <i class="fas fa-comments"></i> Add new answer
                      </span>

                      <span class="manage-button">
                        <i class="fas fa-pencil-alt"></i> Modify
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )
        })}
      </div>
    )
  }
}

export default EntryList

But I get this error:

TypeError: Cannot read property 'renderReplies' of undefined

While, if I replace { this.renderReplies(entry.replies) } by console.log(entry.replies) it does print the replies of every question. I've also tried this solution before coming up with the renderReplies function but I just get the same error...
Also if I put {entry.replies} in my html code, it does render a list of strings too.

Does anyone have an idea of why I get this error and how I can display my list of replies? Thanks.

Inside of the constructor put this.renderReplies = this.renderReplies.bind(this) — Mark C.
– Mark C., Commented Sep 7, 2018 at 14:41

Nicholas Tower · Accepted Answer · 2018-09-07 14:43:15Z

1

{this.state.list.map(function(entry) {

Change this to be an arrow function instead. Arrow functions take their value of this from the context in which they are defined, which means inside the function this will continue to be your component

{this.state.list.map((entry) => {

answered Sep 7, 2018 at 14:43

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

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

Comments

Kelly Barber · Accepted Answer · 2018-09-07 14:43:33Z

1

I think your problem may be not binding the function to the class. Try adding the following line of code to your constructor function:

this.renderReplies = this.renderReplies.bind(this)

Alternatively you could use an arrow function to maintain the context of 'this'. Which would look like:

renderReplies = replies => { ... }

answered Sep 7, 2018 at 14:43

Kelly Barber

763 bronze badges

Comments

Alex C · Accepted Answer · 2018-09-07 14:43:30Z

0

It's most likely because this.renderReplies is called inside a function(){} which overrides this. You can avoid this by using an arrow function like so:

this.state.list.map(entry => {
...
{ this.renderReplies(entry.replies) }
...
});

You can read more about this on arrow functions here

answered Sep 7, 2018 at 14:43

Alex C

5261 gold badge7 silver badges15 bronze badges

Collectives™ on Stack Overflow

A loop in a loop of array of objects

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related