Skip to content

Instantly share code, notes, and snippets.

@furenku
Created September 24, 2018 21:16
Show Gist options
  • Select an option

  • Save furenku/bb2491486d7891deafd3c96f49311e67 to your computer and use it in GitHub Desktop.

Select an option

Save furenku/bb2491486d7891deafd3c96f49311e67 to your computer and use it in GitHub Desktop.
react: container vs presentational
const icons = {
uno: "smiley",
dos: "thumbs",
tres: "star"
}
const IconActionButton = ({label,icon,onClickCallback,buttonUserState,buttonActionCount}) => {
return (
<div
className={ buttonUserState ? 'active': 'inactive'}
onClick={onClickCallback}>
<i className=´fa fa-${icon}´></i>}
<span>
{label}
</span>
<span>
{buttonActionCount}
</span>
...
<div/>
)
}
class Contenedor extendcs ... {
render = () => {
return (
<Fragment>
<IconActionButton
label="Una etiqueta"
icon={icons.uno}
onClickCallback={func1}
buttonUserState={this.state.boton1}
buttonActionCount={this.state.botonActionCount1}
/>
<IconActionButton
label="Otra etiqueta"
icon={icons.dos}
onClickCallback={func2}
buttonUserState={this.state.boton1}
buttonActionCount={this.state.botonActionCount1}
/>
<IconActionButton
label="Una etiqueta más"
icon={icons.tres}
onClickCallback={func3}
buttonUserState={this.state.boton1}
buttonActionCount={this.state.botonActionCount1}
/>
</Fragment>
)
}
func1 = () => {
console.log("uno");
}
func2 = () => {
console.log("dos");
}
func3 = () => {
console.log("tres");
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment