msb-public
/
30-Days-Of-React
mirror of https://github.com/Asabeneh/30-Days-Of-React
2
1
Code Issues Projects Releases Wiki Activity

Day_16 has been added

Browse Source
pull/72/head
asabeneh 4 years ago
parent 479667a74c
commit 2df2d25cb4
2 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File

6
16_Higher_Order_Component/16_higher_order_component.md
Unescape View File

@ -99,7 +99,7 @@ const Button = ({ onClick, text, style }) => {
) )
} }
const buttonWithStyles = (CompParam, bgColor = 'default') => { const buttonWithStyles = (CompParam, name = 'default') => {
const colors = [ const colors = [
{ {
name: 'default', name: 'default',
@ -132,7 +132,7 @@ const buttonWithStyles = (CompParam, bgColor = 'default') => {
color: '#ffffff', color: '#ffffff',
}, },
] ]
const { backgroundColor, color } = colors.find((c) => c.name === bgColor) const { backgroundColor, color } = colors.find((c) => c.name === name)
const buttonStyles = { const buttonStyles = {
backgroundColor, backgroundColor,
@ -170,7 +170,7 @@ class App extends Component {
text='Info' text='Info'
onClick={() => alert('I am styled with info color')} onClick={() => alert('I am styled with info color')}
/> />
<SuccessButton text='Success' onClick={() => alert('I am succesful')} /> <SuccessButton text='Success' onClick={() => alert('I am successful')} />
<WarningButton <WarningButton
text='Warning' text='Warning'
onClick={() => alert('I warn you many times')} onClick={() => alert('I warn you many times')}

6
16_Higher_Order_Component/16_higher_order_component_boilerplate/src/index.js
Unescape View File

@ -9,7 +9,7 @@ const Button = ({ onClick, text, style }) => {
) )
} }
const buttonWithStyles = (CompParam, bgColor = 'default') => { const buttonWithStyles = (CompParam, name = 'default') => {
const colors = [ const colors = [
{ {
name: 'default', name: 'default',
@ -42,7 +42,7 @@ const buttonWithStyles = (CompParam, bgColor = 'default') => {
color: '#ffffff', color: '#ffffff',
}, },
] ]
const { backgroundColor, color } = colors.find((c) => c.name === bgColor) const { backgroundColor, color } = colors.find((c) => c.name === name)
const buttonStyles = { const buttonStyles = {
backgroundColor, backgroundColor,
@ -81,7 +81,7 @@ class App extends Component {
text='Info' text='Info'
onClick={() => alert('I am styled with info color')} onClick={() => alert('I am styled with info color')}
/> />
<SuccessButton text='Success' onClick={() => alert('I am succesful')} /> <SuccessButton text='Success' onClick={() => alert('I am successful')} />
<WarningButton <WarningButton
text='Warning' text='Warning'
onClick={() => alert('I warn you many times')} onClick={() => alert('I warn you many times')}

Write Preview
Loading…
Cancel
Save