Question 269044 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to properly display records via reactjs

Am trying to display the following record via JavaScript but it throws error:

this.state.entitiesx.data is undefined

In jQuery I can successfully get the lemma values from the record with the code below

$.each(entitiesx.data.entities, function(k, v) {
  var value = v.lemma;
  var res_entities = "<span>" +
    "<span> " + value + "</span>" +              
    "</span>";
  $("#result_entities_append").append(res_entities);
});

Here is my React js approach

Error it throws:

this.state.entitiesx.data is undefined

Please how do I get the lemma params/values from the record?

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

    this.state = {
      entitiesx: [{
        "success": true,
        "data": {
          "content": "Michael Jordan.",
          "language": "en",
          "version": "sensei: 4.7.0; disambiguator: 16.0-QNTF-2017",
          "entities": [{
            "type": "ORG",
            "lemma": "National Basketball Association",
            "syncon": 206667,
            "positions": [{
              "start": 134,
              "end": 137
            }],
            "relevance": 15,
            "attributes": [{
              "attribute": "role",
              "lemma": "league",
              "syncon": 36252,
              "type": "org"
            }]
          }, {
            "type": "NPH",
            "lemma": "Michael Jordan",
            "syncon": 436096,
            "positions": [{
              "start": 0,
              "end": 14
            }, {
              "start": 79,
              "end": 85
            }, {
              "start": 107,
              "end": 109
            }],
            "relevance": 11,
            "attributes": [{
              "attribute": "gender",
              "lemma": "male",
              "syncon": -1,
              "type": ""
            }, {
              "attribute": "role",
              "lemma": "autobiographer",
              "syncon": 41500,
              "type": "nph"
            }, {
              "attribute": "role",
              "lemma": "ballplayer",
              "syncon": 41549,
              "type": "nph"
            }, {
              "attribute": "role",
              "lemma": "basketball player",
              "syncon": 41582,
              "type": "nph"
            }, {
              "attribute": "role",
              "lemma": "entrepreneur",
              "syncon": 42572,
              "type": "nph"
            }, {
              "attribute": "role",
              "lemma": "natural person",
              "syncon": 220500,
              "type": "nph"
            }, {
              "attribute": "role",
              "lemma": "shooting guard",
              "syncon": 233044,
              "type": "nph"
            }, {
              "attribute": "role",
              "lemma": "spokesman",
              "syncon": 136019,
              "type": "nph"
            }]
          }],
          "knowledge": [{
            "syncon": 206667,
            "label": "organization.sport_association",
            "properties": [{
              "type": "DBpediaId",
              "value": "dbpedia.org/page/National_Basketball_Association"
            }, {
              "type": "WikiDataId",
              "value": "Q155223"
            }]
          }, {
            "syncon": 436096,
            "label": "person.author",
            "properties": [{
              "type": "WikiDataId",
              "value": "Q41421"
            }]
          }]
        }
      }]
    };
  }

  render() {
    return (
      <div className="container">

        <div>
          <h3>List of Records</h3>
          <ul>
{this.state.entitiesx.data.entities.map((obj, i) => (
              <li key={i}>
                {obj.lemma}
             
              </li>
            ))}

          </ul>
        </div>
       

      </div>
    );
  }
}
ReactDOM.render(<Application />, document.getElementById('app'));
Tags:

2

Answers


  1. 0

    Because this.state.entitiesx.data is indeed undefined. this.state.entitiesx is an array:

    this.state = {
  entitiesx: [/.../]
};

    And an array has no property called data. Perhaps you meant to map over that array?:

    {this.state.entitiesx.map((ent, i) => (
  ent.data.entities.map((obj, j) => (
    <li key={`${i}${j}`}>
      {obj.lemma}
    </li>
))))}

    (As an aside… If obj has a property that is expected to be unique, that may make a better key value than just the array indexes.)

    Login or Signup to reply.
  2. 0

    You just mistakenly made the value of entitiesx an array with a single object. You likely just meant it to be an object. Making the change below should lead to success.

    this.state = {
  entitiesx: { // removed opening bracket ([)
    /*...*/
  } // removed closing bracket (])
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search