React Js Interview Question
Here are some ways to implement conditional rendering in React:
- Using an if-else statement within the
rendermethod:
render() {
if (this.state.isLoading) {
return <div>Loading...</div>;
} else {
return <div>Hello, World!</div>;
}
}2. Using a ternary operator within JSX:
render() {
return this.state.isLoading ? <div>Loading...</div> : <div>Hello, World!</div>;
}3. Using short-circuit evaluation with logical operators:
render() {
return this.state.isLoading && <div>Loading...</div>;
}4. Using a function or variable to store the conditional content:
renderContent() {
if (this.state.isLoading) {
return <div>Loading...</div>;
}
return <div>Hello, World!</div>;
}
render() {
return <div>{this.renderContent()}</div>;
}
//
getContent() {
if (this.state.isLoading) {
return <div>Loading...</div>;
}
return <div>Hello, World!</div>;
}
render() {
const content = this.getContent();
return <div>{content}</div>;
}