conditional rendering react component [duplicate]

Question

Problem Statement React element not loading on conditional rendering

What I have done till now

I have a simple condition and I want to render components based on that. Here's how it looks like. I want to render IoMdAdd when true

true
  ? (()=>(<Link><IoMdAdd size="25"/></Link>))
  : (()=>(<Link><IoIosHeartEmpty size="25"/></Link>))

conversely, I want to show IoIosHeartEmpty when the condition is false

false
  ? (()=>(<Link><IoMdAdd size="25"/></Link>))
  : (()=>(<Link><IoIosHeartEmpty size="25"/></Link>))

Current behavior It doesn't show anything. The element doesn't appear in the dom when I do inspect element.

Expected behavior Show one of the components based on the condition

Edit Since y'all are asking for more code, let me paste the entire component

import React, { Component } from "react";
import { Link } from "@reach/router";
import { IoIosHeartEmpty, IoMdAdd } from "react-icons/io";
import { connect } from "react-redux"
class Header extends Component {
    render() {
        return (

            <div className="wishlist-icon">
                {(localStorage.getItem("accessLevel") == "Admin" && this.state.loggedInUser.accessLevel == "Admin") ? (<Link to="AdminPage"><IoMdAdd size="25" /></Link>) : (<Link to="UserPage"><IoIosHeartEmpty size="25" /></Link>)}
            </div>
        );
    }
}
const mapStateToProps = state => {
    return {
        loggedInUser: state.loggedInUser
    }
}
export default connect(mapStateToProps)(Header)

If the user is admin, I want to show him an icon that links him to the admin page, otherwise, I want to take him to the user page.

We probably need more code . Where do you wrote this ? in your render? — TheoWckr
– TheoWckr, Commented Apr 17, 2020 at 15:30
The code in your edit looks fine. do either of the links work without the ternary? — user400654
– user400654, Commented Apr 17, 2020 at 15:45
They work without the ternary. They work if I don't enclose them in a pair of paranthesis and <Link> <Link/> element too. I want to have the link element so that a user can go to those links. — Sarthak Batra
– Sarthak Batra, Commented Apr 17, 2020 at 15:47
This is the error I get when I take away the parenthesis ``` 3 | //////////////////////////////////////////////////////////////////////////////// 4 | // startsWith(string, search) - Check if string starts with search 5 | var startsWith = function startsWith(string, search) { > 6 | return string.substr(0, search.length) === search; 7 | }; 8 | 9 | //////////////////////////////////////////////////////////////////////////////// ``` — Sarthak Batra
– Sarthak Batra, Commented Apr 17, 2020 at 15:48
The parenthesis aren't necessary, so remove them and it works? or was that a mistake in your comment — user400654
– user400654, Commented Apr 17, 2020 at 15:48

Till · Accepted Answer · 2020-04-17 15:33:40Z

0

{true? 
  <Link><IoMdAdd size="25"/></Link>
: <Link><IoIosHeartEmpty size="25"/></Link>
}

answered Apr 17, 2020 at 15:33

Till

154 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Till Over a year ago

hope this can help you. If it worked I would be happy if you mark my answer as correct :)

rzwnahmd · Accepted Answer · 2020-04-17 15:30:07Z

-1

You're not returning React components instead a function, so try this:

true
  ? (<Link><IoMdAdd size="25"/></Link>)
  : (<Link><IoIosHeartEmpty size="25"/></Link>)

answered Apr 17, 2020 at 15:30

rzwnahmd

1,0825 silver badges8 bronze badges

Comments

twharmon · Accepted Answer · 2020-04-17 16:21:00Z

-1

Can you use this in the JSX?

{myBool ? (
  <Link><IoMdAdd size="25"/></Link>
) : (
  <Link><IoIosHeartEmpty size="25"/></Link>
)}

edited Apr 17, 2020 at 16:21

answered Apr 17, 2020 at 15:29

twharmon

3,7905 gold badges27 silver badges50 bronze badges

Collectives™ on Stack Overflow

conditional rendering react component [duplicate]

3 Answers 3

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Linked

Related