{
    title: "My Title",
    entryID: 1,
    url: "#",
    author: "William Pears, Andrew Cutcher",
    ment_count: 2
  }

I got this object and I am trying to figure out how to display this in my React ponent.

I want to display like a blog entry where when clicking on title I could hopen the link (url) and show author also on the blog entry..

Please help!!

  {
    title: "My Title",
    entryID: 1,
    url: "#",
    author: "William Pears, Andrew Cutcher",
    ment_count: 2
  }

I got this object and I am trying to figure out how to display this in my React ponent.

I want to display like a blog entry where when clicking on title I could hopen the link (url) and show author also on the blog entry..

Please help!!

• javascript
• reactjs
• list

Share Improve this question Follow asked Jul 7, 2018 at 22:54 BernardCretchzBernardCretchz 2311 silver badge33 bronze badges 3

• please paste a react code where you want to display this object – RainDev Commented Jul 7, 2018 at 22:58
• 1 This question reads as "I have this object, please write my application to do everything I want without me trying anything" – vol7ron Commented Jul 7, 2018 at 23:02
• 1 Wele to stackoverflow Bernard! Please include the code your have written so far, so we can understand what issue you are having, and so we can help you. – Tholle Commented Jul 7, 2018 at 23:09

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Map overs the keys of object

{Object.keys(yourObject).map(function(key) { return <div>Key: {key}, Value: {yourObject[key]}</div>; })}

Two things here:

• where will you store the data?
  • is it in state?
    • then use this.state.{propertyName}
      • @dotnetdev4president explained how to access this.state.property, except, you should wrap the reference in curly braces
  • is it in a constant?
    • then check my example below with JavaScript’s .map method
• for rendering/displaying the data to React Components
  • you might want to check this for blog-like entries: https://reactstrap.github.io/ponents/card/

Loop through your object, with the above mentioned .map like so:

const yourExampleDataConstant = {
  title: "My Title",
  entryID: 1,
  url: "#",
  author: "William Pears, Andrew Cutcher",
  ment_count: 2
};

return <div>
  {yourExampleDataConstant.map(element => (
    return <ul key={element.entryID} >
      <a href={element.url}><li>{element.title}</li></a>
      <li>{element.author}</li>
      <li>{element.ment_count}</li>
    </ul>
  ))}
</div>;

}

However, context of your code would be useful!

Hope this helps!

PS. Looks while I was writing an answer, @nikhilkarkra already replied with what I had in mind :)

If you saved your data into the state with this.setState({your_object}) you can output easyly in jsx:

<p>this.state.title</p>
<p>this.state.author</p>

And so on...