-
Notifications
You must be signed in to change notification settings - Fork 0
/
ConditionalComponent.js
79 lines (67 loc) · 1.5 KB
/
ConditionalComponent.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
import React from 'React'
import { Button, Text, View } from 'react-native';
export default class ConditionalComponent extends React.Component {
constructor(props){
super(props);
this.manejarDesLoggeo = this.manejarDesLoggeo.bind(this);
this.manejarLoggeo = this.manejarLoggeo.bind(this);
this.state = { estaPresente: true };
}
manejarDesLoggeo(){
this.setState(previousState => (
{ estaPresente: !previousState.estaPresente}
));
}
manejarLoggeo(){
this.setState(previousState => (
{ estaPresente: !previousState.estaPresente}
));
}
render(){ // usa this.state
const estaPresente = this.state.estaPresente;
let botoncito;
if (estaPresente){
botoncito = <ButtonDesloggeo onPress={this.manejarLoggeo} />
} else {
botoncito = <ButtonLoggeo onPress={this.manejarDesLoggeo} />
}
return (
<View>
<Mensaje estaPresente={estaPresente} />
{botoncito}
</View>
);
}
}
function MensajeDesloggeo(props){
return <Text>Entrar 💣 </Text>
}
function MensajeloggeoActivo(props){
return <Text>Hola</Text>
}
// usa 'props'
function Mensaje(props){
const estaPresente = props.estaPresente;
if(estaPresente){
return <MensajeloggeoActivo />
}
return <MensajeDesloggeo />
}
function ButtonDesloggeo(props){
return (
<Button
onPress={props.onPress}
title="des-loggear"
color="#841584"
/>
)
}
function ButtonLoggeo(props){
return (
<Button
onPress={props.onPress}
title="loggear"
color="#841584"
/>
)
}