React separating presentation and logic (smart-dumb component)

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import SongsListContainer from './SongsListContainer';


ReactDOM.render(
  <SongsListContainer genre="^Bollywood" limit="8"/>,
  document.getElementById('root')
);

SongsListContainer.js

import React, { Component } from 'react';
import Request from 'superagent';

// Logic (Smart)
class SongsListContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {meta: []}
    }
    componentDidMount() {
        const url = 'http://localhost:3300/api/v1.0/';
        Request.get(`${url}albums`).query({genre: this.props.genre, limit: this.props.limit}).then((resp) => {
            this.setState({meta: resp.body});
        })
    }
    render() {
        return <SongsList metadata={this.state.meta}/>;
    }
}

// Presentation (Dumb)
const SongsList = (props) => {
    return (
        <div className="metaBox">
            {
                props.metadata.map((meta) => {
                    return <p key={meta._id}>{meta.album}</p>;
                })
            }
        </div>
    )
};


export default SongsListContainer;