top of page
Logo der Online Agentur mdwp

If-Else Statement

ReactJS is a popular JavaScript library that's used for building user interfaces, particularly for single-page applications.

During development, there might be instances where you want to render different components or elements based on a particular condition. ReactJS doesn't offer specific "if-else" statements within the markup (JSX) for conditional rendering, however, it can be conventionally used within component's methods for returning varied JSX.

An If-Else statement in ReactJS is utilized to manage the flow of the components, to perform a different action based on different conditions.

Here's a simple demonstration how If-Else statement could be used inside a component's render method into React:

class MyComponent extends React.Component {
constructor(props) {
this.state = {
isLogged: false

render() {
if(this.state.isLogged) {
return <h1>Welcome back!</h1>;
} else {
return <h1>Please log in.</h1>;

ReactDOM.render(<MyComponent />, document.getElementById("app"));

In the code example provided, when the `isLogged` state property is `true`, the component will render "Welcome back!". However, when `isLogged` is `false`, the component will render "Please log in.". The If-Else statement is essentially used to determine what the user sees based on whether or not they're logged in.

bottom of page