Как распечатать данные реквизита в компоненте реакции?

Question

Это мой компонент реакции:

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

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


    return (
        <div>
        //code to print

        </div>
    ) 
}

export default Trending;

Я получаю свои данные в журнале консоли.

(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)

Я хочу напечатать все db_keyword и db_frequency на моей html-странице. Пожалуйста, помогите распечатать данные.

Answer 1

Использовать map примерно так:

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

Answer 2

Используйте map для циклического перебора элементов и возврата нужного элемента, например, <div>, <h1> и т. Д.

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