Question 74078 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How do I have my else statement return a single line – Reactjs

I am trying to return a page that shows a users routines. I want a message to display to the user that they do not have any made routines. The problem is in my else statement, I can only return console.error. If I do some HTML, it will return that for the entire routines array of what I sent over. I just want it to return a single "No activities found, create one above."

routines.map((routine) => {

                    if (currentUser === routine.creatorName) {
                        return (
                            <div className="routineCard">
                                <h3>Routines</h3>
                                <p>Name: {routine.name}</p>
                                <p>goal: {routine.goal}</p>
                                <p>User: {routine.creatorName}</p>
                                <ul > Activities
                                    <li className="routineActivityCards">{
                                        routine.activities.map((activity) => {
                                            return (
                                                <div className="routineActivityCard">
                                                    <ul>
                                                        <h5>{activity.name}</h5>
                                                        <p>Info: {activity.description}</p>
                                                        <p>Count: {activity.count}</p>
                                                        <p>Duration: {activity.duration}</p>
                                                    </ul>
                                                </div>
                                            )
                                        }
                                        )
                                    }</li>
                                </ul>
                            </div>
                        )
                    } else {
                        return console.error;
                    }
                })

return (
    <div>
        <h1>No activites found</h1>
    </div>
)

I put this in the else, and it returns

No activites found
No activites found
No activites found
No activites found etc...

Maybe if I set my return to just return routine[0]? I just do not know how to exactly word that into my code. Thanks for the help everyone!

Tags:

2

Answers


  1. 0

    First, filter the array to get all the matching entries. If the length of the result is 0, then show the message.

    let matching = routines.filter(routine => routine.creatorName === currentUser);
// use in JSX:
{ matching.length ? matching.map(routine => (
        /* return JSX here */
)) : "No activities found" }
    Login or Signup to reply.
  2. 0

    Just add a try-catch statement, so you can break the loop generated by the Array.prototype.map() method (which does not support the break keyword itself).

    try {
    routines.map((routine) => {
        if (currentUser === routine.creatorName) {
            return(...your code...)
        } else {
            throw 0
        }
    }
} catch(e) {
    ...your code...
}

    An alternative (and maybe it’s the simplest way) is to use a "normal" loop, which supports the break keyword, this way:

    for (let routine of routines) {
    if (currentUser === routine.creatorName) {
        ...your code...
    } else {
        ...your code...
        break
    }
}

    by LL

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search