How to fetch data from api already in props using MDBDataTable

Question

import React from "react";
import { List, Avatar, Icon } from "antd";
import { MDBTable, MDBTableBody, MDBTableHead } from 'mdbreact';
import { MDBDataTable } from 'mdbreact';
const IconText = ({ type, text }) => (
  <span>
    <Icon
      type={type}
      style={{
        marginRight: 8
      }}
    />
    {text}
  </span>
);
const Articles = props => {
  console.log(props.data);

  const data = {
    columns: [
      {
        label: 'Title',
        field: 'title',
        sort: 'asc',
        width: 150
      },
      {
        label: 'Content',
        field: 'content',
        sort: 'asc',
        width: 270
      }
    ],
    rows: [
      {
        title: '{props.title}',
        content: 'xxxxxxxxxxxxxxxxxxxxxxxxxxSystem Architect',
      },
      {
        title: '{props.title2}',
        content: 'zzzzzzzzzzzzzzzzzzzzzzzzzzzSystem Architect2',
      }
    ] 
  };
  return (
    <MDBDataTable
      striped
      bordered
      small
      data={data}
    />
  );
};
export default Articles;

This is my data from the array:

How to modify my rows to show this data? The data is OK this component is receing it. Looks good in console: (console.log(props.data);) Any idea? thank you very much.

The Tbale is showing Ok BUt this the testing data insted from my data coming from my API.

Answer 1

You need to actually use the data coming from your props if you'd like it to reflect in the table. Since the format of the data coming in is the same as what the table expects you dont need to apply any transformations. This should be sufficient.

const data = {
  columns: [
    {
      label: 'Title',
      field: 'title',
      sort: 'asc',
      width: 150,
    },
    {
      label: 'Content',
      field: 'content',
      sort: 'asc',
      width: 270,
    },
  ],
  rows: props.data
}