react_js_conditional_Rendering
// condition rendering:---
// if/else...element variable...ternary operator...shortcircuit operation
import React, { Component } from 'react'
export class condt extends Component {
constructor(props) {
super(props)
this.state = {
isLoggin:false
}
}
render() {
if(this.state.isLoggin){
return <div>gud morning</div>
}
else{
return <div>gud afternoon</div>
}
}
}
export default condt
.....................................................................import React, { Component } from 'react'
export class cond2 extends Component {
constructor(props) {
super(props)
this.state = {
loggin:false
}
}
render() {
let message
if(this.state.loggin){
message="gud morning"
}
else{
message="gud afternoon"
}
return (
<div>
{message}
</div>
)
}
}
export default cond2
.................................................................................import React, { Component } from 'react'
export class cond3 extends Component {
constructor(props) {
super(props)
this.state = {
loggin:true
}
}
render() {
return (
this.state.loggin?
<div>hello</div>:
<div>gud morning</div>
)
}
}
export default cond3
..............................................................................import React, { Component } from 'react'
export class cond4 extends Component {
constructor(props) {
super(props)
this.state = {
loggin:true
}
}
render() {
return (
this.state.loggin &&<div>gud morning</div>
)
}
}
export default cond4
Comments
Post a Comment