I need to change render function and run some sub render function when a specific state given,
For example:
render() {
return (
<View style={styles.container}>
if (this.state == 'news'){
return (
<Text>data</Text>
)
}
</View>
)
}
How can I implement that without changing scenes, I will use tabs to change content dynamically.
You can achieve what you are saying by using Immediately Invoked Function Expression (IIFE)
render() {
return (
<View style={styles.container}>
{(() => {
if (this.state == 'news'){
return (
<Text>data</Text>
)
}
return null;
})()}
</View>
)
}
Here is the working example:
But, In your case, you can stick with the ternary operator
I do like this and its working fine.
constructor() {
super();
this.state ={
status:true
}
}
render() {
return(
{ this.state.status === true ?
<TouchableHighlight onPress={()=>this.hideView()}>
<View style={styles.optionView}>
<Text>Ok Fine :)</Text>
</View>
</TouchableHighlight>
:
<Text>Ok Fine.</Text>
}
);
}
hideView(){
this.setState({
home:!this.state.status
});
}
There's a Babel plugin that allows you to write conditional statements inside JSX without needing to escape them with JavaScript or write a wrapper class. It's called JSX Control Statements:
<View style={styles.container}>
<If condition={ this.state == 'news' }>
<Text>data</Text>
</If>
</View>
It takes a bit of setting up depending on your Babel configuration, but you don't have to import anything and it has all the advantages of conditional rendering without leaving JSX which leaves your code looking very clean.
What about switch case instead of if-else
render() {
switch (this.state.route) {
case 'loginRoute':
return (
<Login changeRoute={this.changeRoute}
changeName={this.changeName}
changeRole={this.changeRole} />
);
case 'adminRoute':
return (
<DashboardAdmin
role={this.state.role}
name={this.state.name}
changeRoute={this.changeRoute}
/>
);
default:
return <></>;
}
render() {
return (
<View style={styles.container}>
(() => {
if (this.state == 'news') {
return <Text>data</Text>
}
else
return <Text></Text>
})()
</View>
)
}
Simple example of nested loop with if condition in React:
Data example:
menus: [
{id:1, name:"parent1", pid: 0},
{id:2, name:"parent2", pid: 0},
{id:3, name:"parent3", pid: 0},
{id:4, name:"parent4", pid: 0},
{id:5, name:"parent5", pid: 0},
{id:6, name:"child of parent 1", pid: 1},
{id:7, name:"child of parent 2", pid: 2},
{id:8, name:"child of parent 2", pid: 2},
{id:9, name:"child of parent 1", pid: 1},
{id:10, name:"Grand child of parent 2", pid: 7},
{id:11, name:"Grand child of parent 2", pid: 7},
{id:12, name:"Grand child of parent 2", pid: 8},
{id:13, name:"Grand child of parent 2", pid: 8},
{id:14, name:"Grand child of parent 2", pid: 8},
{id:15, name:"Grand Child of Parent 1 ", pid: 9},
{id:15, name:"Child of Parent 4 ", pid: 4},
]
Nested Loop and Condition:
render() {
let subMenu='';
let ssubmenu='';
const newMenu = this.state.menus.map((menu)=>{
if (menu.pid === 0){
return (
<ul key={menu.id}>
<li>
{menu.name}
<ul>
{subMenu = this.state.menus.map((smenu) => {
if (menu.id === smenu.pid)
{
return (
<li>
{smenu.name}
<ul>
{ssubmenu = this.state.menus.map((ssmenu)=>{
if(smenu.id === ssmenu.pid)
{
return(
<li>
{ssmenu.name}
</li>
)
}
})
}
</ul>
</li>
)
}
})}
</ul>
</li>
</ul>
)
}
})
return (
<div>
{newMenu}
</div>
);
}
}
<Card style={
{ backgroundColor: '#ffffff',
height: 150, width: 250, paddingTop: 10 }}>
<Text style={styles.title}>
{item.lastName}, {item.firstName} ({item.title})
</Text>
<Text > Email: {item.email}</Text>
{item.lastLoginTime != null ?
<Text > Last Login: {item.lastLoginTime}</Text>
: <Text > Last Login: None</Text>
}
{
item.lastLoginTime != null ? <Text >
Status: Active</Text> : <Text > Status: Inactive</Text>
}
</Card>
There is no need for the if else condition in JSX. It provides a function like ternary operator to make the thing happen for you, example:
state={loading:false}
<View>
{loading ? <Text>This is a test For if else condition</Text> : <ActivityIndicator/>
</View>
In two ways we can solve this problem:
<div> element.render() {
return (
<View style={styles.container}>
if (this.state == 'news'){
return (
<Text>data</Text>
);
}
else {
<div> </div>
}
</View>
)
}
Just Tried that:
return(
<>
{
main-condition-1 &&
main-condition-2 &&
(sub-condition ? (<p>Hi</p>) : (<p>Hello</p>))
}
</>
)
Let me know what you guys think!!!
Just Write Down The Code
<>
{row.photo != null ? <img src={serverPath(row.photo)} className='img-fluid shadow-4' alt="" /> : ''}
</>
If you want to use an conditional statement in functional component then you can call a function from jsx and put all your conditional logic inside it.
conditionalRender(){
if(state === 'news') {
return <Text>data</Text>;
}
else(state !== 'news') {
return <Text>Static Value</Text>;
}
}
render() {
return (
<View style={styles.container}>
{ conditionalRender() }
</View>
)
}
For this we can use ternary operator or if there is only one condition then "&&" operator .Like this:-
//This is for if else
render() {
return (
<View style={styles.container}>
{this.state == 'news') ?
<Text>data</Text>
: null}
</View>
)
}
//This is only for if or only for one condition
render() {
return (
<View style={styles.container}>
{this.state == 'news') &&
<Text>data</Text>
}
</View>
)
}