Why my react datatable is rendering all data at once also search bar is not working?

Question

Am using mdbreact to render data fetched to show in the datatable, all the data is rendering at once, it is not following pagination also the search bar is not searching anything. Every feature of datatable is rendered properly only the functionality is not working.

import {MDBDataTable} from 'mdbreact';
class Quake extends Component {
    constructor(props){
        super(props)
        this.state={
            posts:[],
            error:''
        }
    }

    componentDidMount(){
        axios.get('https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=2014-01-01&endtime=2014-01-02')
            .then(response =>{
                //console.log(response)
                this.setState({
                    posts : response.data.features
                },()=>console.log(this.state.posts))
            })
            .catch(error =>{
                console.log(error)
                this.setState({
                    error : 'Error retreiving data'
                })
            })
    }
    render(){
        const{posts,error} = this.state
        const location = posts.map(post=><div key={post.id}>{post.properties.place}</div>)
        const mag = posts.map(post=><div key={post.id}>{post.properties.mag}</div>)
        const data = {
            columns : [
                {
                    label:'Magnitude',
                    field:'mag'
                },
                {
                    label:'Place',
                    field:'loc'
                }
            ],
            rows : [
                {
                    'mag':mag,
                    'loc':location
                }
            ]
        }
        console.log("Something Fishy")
        return(
            <MDBDataTable
                striped
                bordered
                small
                data={data}/>
 );
    }
}

export default Quake

Answer 1

You need to map through the rows. Right now it's all one row.

    const rows = posts.map(post => ({
      mag: <div key={post.id} > {post.properties.mag}</div>,
      loc: <div key={post.id}>{post.properties.place}</div>
    }));

    const data = {
      columns: [
        {
          label: 'Magnitude',
          field: 'mag'
        },
        {
          label: 'Place',
          field: 'loc'
        }
      ],
      rows
    }