Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
React separating presentation and logic (smart-dumb component)
import React from 'react';
import ReactDOM from 'react-dom';
import SongsListContainer from './SongsListContainer';
ReactDOM.render(
<SongsListContainer genre="^Bollywood" limit="8"/>,
document.getElementById('root')
);
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.