This is my react ponent:

import React from 'react';
import { promised } from 'q';

const Trending = (props) => {
    console.log(props.data);


    return (
        <div>
        //code to print

        </div>
    ) 
}

export default Trending;

I am getting my data in my console log.

(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0:
db_frequency: 17
db_keyword: "modi"
__proto__: Object
1: {db_keyword: "gandhi", db_frequency: 14}
2: {db_keyword: "ipl", db_frequency: 10}
3: {db_keyword: "election", db_frequency: 18}
4: {db_keyword: "vote", db_frequency: 7}
5: {db_keyword: "upsc", db_frequency: 11}
6: {db_keyword: "dhoni", db_frequency: 6}
7: {db_keyword: "ranveer", db_frequency: 7}
8: {db_keyword: "pollution", db_frequency: 2}
9: {db_keyword: "unemployment", db_frequency: 1}
length: 10
__proto__: Array(0)

I want to print all the db_keyword and db_frequency in my html page. Kindly help to print the data.

This is my react ponent:

import React from 'react';
import { promised } from 'q';

const Trending = (props) => {
    console.log(props.data);


    return (
        <div>
        //code to print

        </div>
    ) 
}

export default Trending;

I am getting my data in my console log.

(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0:
db_frequency: 17
db_keyword: "modi"
__proto__: Object
1: {db_keyword: "gandhi", db_frequency: 14}
2: {db_keyword: "ipl", db_frequency: 10}
3: {db_keyword: "election", db_frequency: 18}
4: {db_keyword: "vote", db_frequency: 7}
5: {db_keyword: "upsc", db_frequency: 11}
6: {db_keyword: "dhoni", db_frequency: 6}
7: {db_keyword: "ranveer", db_frequency: 7}
8: {db_keyword: "pollution", db_frequency: 2}
9: {db_keyword: "unemployment", db_frequency: 1}
length: 10
__proto__: Array(0)

I want to print all the db_keyword and db_frequency in my html page. Kindly help to print the data.

• javascript
• arrays
• reactjs
• object
• ecmascript-6

• Possible duplicate of React.js create loop through Array. Also, docs. – maazadeeb Commented Apr 13, 2019 at 11:10

2 Answers 2

Use map like so:

return (
    <div>
        <ul>
            {props.data.map(({ db_keyword, db_frequency }, index) => <li key={index}>Keyword: {db_keyword}, Frequency: {db_frequency}</li>)}
        </ul>
    </div>
);

Use map to loop over items, and return the element you want, e.g. <div>, <h1> etc.

return (<div>
  <ul>
    props.data.map((item, i) => <li key={i}>{`Keyword: ${item.db_keyword}, Frequency: ${item.db_frequency}`}</li>)
  </ul>
</div>