If-else statement in .map loop in JSX

Question

Instagram clone:

I want to check if I follow my follower then display <button>unfollow</button> or if not display <button>follow</button>

var IfollowAndHeFollowMe;

myfollowers.map(follower => {
     return(
       <div>
          <div>{follower.userName}</div>
          { IfollowAndHeFollowMe = 
            myfollowings.filter((following) => following.userName == follower.userName)
          }


          // this doesn't work

         { IfollowAndHeFollowMe.length > 0 ? return( <button>unfollow</button>): return(<button>follow</button>) }


         // and this also doesn't work

         { return IfollowAndHeFollowMe.length > 0 ? <button>unfollow</button> : <button>follow</button>}


       </div>
    )
})

//https://instagram-app-clone.netlify.app/ --- just for phone ---

Eugene · Accepted Answer · 2021-04-23 13:52:44Z

4

JSX Code inside {} should be written as statements.

https://reactjs.org/docs/conditional-rendering.html

const followers = ['John', 'Hanna'];

function RenderMap() {
    return (
        <React.Fragment>
            {followers.map(follower => (
                <div>
                    <span>{follower}</span>
                    {followers.length > 0 ? (
                        <button>unfollow</button>
                    ) : (
                        <button>follow</button>
                    )}
                </div>
            ))}
        </React.Fragment>
    );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

edited Apr 23, 2021 at 13:52

answered Apr 23, 2021 at 13:13

Eugene

6137 silver badges21 bronze badges

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

25 Comments

Tuzi Over a year ago

without return??

Eugene Over a year ago

Yes, this is how Javascript Ternary operators works. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Tuzi Over a year ago

Uncaught Error: Objects are not valid as a React child (found: object with keys {userName, name, profImg, posts}). If you meant to render a collection of children, use an array instead.

Tuzi Over a year ago

{ IfollowAndHeFollowMe = myfollowings.filter(following => following.userName == follower.userName) }

Tuzi Over a year ago

and this is bad , can y help me?

|

Tuzi · Accepted Answer · 2021-04-23 14:04:02Z

0

// now dont have errors but its allways display button with follow text

{Data[2][0].followers.map(follower => {
                idFollowers++;

                return (

                    <div className="follower" id={idFollowers}  >
                        <img src={follower.profilna} className="profilnaFollower" alt="" />

                        <div className="userInfoFollower">
                            <h3>{follower.userName}</h3>
                            <p>{follower.name}</p>
                        </div>

                        {dbFollow = Object.entries(Data[2][0].following).filter(following => following.userName == follower.userName)}
                        {dbFollow.length > 0 ? (<button>unfoldasdaslow</button>) : (<button>fodsadsllow</button>)}
                    </div>
                )
            })}
        </div>

edited Apr 23, 2021 at 14:04

answered Apr 23, 2021 at 13:52

Tuzi

1601 gold badge1 silver badge14 bronze badges

14 Comments

Eugene Over a year ago

Seems to be looking right, what is the error?

Tuzi Over a year ago

its cant dbFollow be object because following1 is object. must be array or string , it will set following1 with .filter() but i want to dbFollow be following1.userName not object

Tuzi Over a year ago

Objects are not valid as a React child (found: object with keys {userName, name, profilna, posts}). If you meant to render a collection of children, use an array instead.

Eugene Over a year ago

If you get this error you shared above:

Uncaught Error: Objects are not valid as a React child (found: object with keys {userName, name, profImg, posts}). If you meant to render a collection of children, use an array instead.

Then the problem is that you are using Array methods over an Object.

Tuzi Over a year ago

the problem is here: {dbFollow = following.filter(following1 => following1.userName == follower.userName

|

Collectives™ on Stack Overflow

If-else statement in .map loop in JSX

2 Answers 2

25 Comments

14 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

25 Comments

14 Comments

Your Answer

Sign up or log in

Post as a guest

Related