Issue with Navbar

[arodriguez47]

I've been unable to get the Navbar component to work once I add the React Context. I get the following error message:

I've tried to refactor the code many ways but still getting a similar message.

This is my latest version:

import Link from 'next/link';
import React from 'react';
import { useContext } from "react";
import { UserContext } from "../lib/context";

const { user, username } = useContext(UserContext)

function LoggedIn() {

    return (
        <>
            <li className='push-left'>
                <Link href="/admin">
                    <button className="btn-blue">Write Posts</button>
                </Link>
            </li>
            <li>
                <Link href={`/${username}`}>
                    <img src={user?.photoURL} alt=/>
                </ Link>
            </li>
        </>
    )
}

function LoggedOut() {
    return (
        <>
            <li>
                <Link href="/enter">
                    <button className="btn-blue">Log in</button>
                </Link>
            </li>
        </>
    )
}

// Top Navbar
export default function Navbar() {


    let loginStatus;
    if (username) {
        loginStatus = <LoggedIn />

    } else {
        loginStatus = <LoggedOut />
    }

    return (
        <nav className='navbar'>
            <ul>
                <li>
                    <Link href="/">
                        <button className={"btn-logo"}>NXT</button>
                    </Link>
                </li>
                {loginStatus}

            </ul>
        </nav>
    )
}

This was my version following the course tutorial...

import Link from 'next/link';
import React from 'react';
import {useContext} from "react";
import {UserContext} from "../lib/context";

// Top Navbar
export default function Navbar() {
    const { user, username } = useContext(UserContext)

    return (
        <nav className='navbar'>
            <ul>
                <li>
                    <Link href="/">
                        <button>FEED</button>
                    </Link>
                </li>

                {/* user is signed in and has username */}
                {username && (
                    <div>
                        <li className='push-left'>
                            <Link href="/admin">
                                <button className="btn-blue">Write Posts</button>
                            </Link>
                        </li>
                        <li>
                            <Link href={`/${username}`}>
                                <img src={user?.photoURL} alt=/>
                            </Link>
                        </li>
                    </div>
                )}


                {/* user is not signed in OR has not created username */}
                {!username && (
                    <li>
                        <Link href="/enter">
                            <button className="btn-blue">Log in</button>
                        </Link>
                    </li>
                )}
            </ul>
        </nav>
    )
}

Neither have worked... I'm using WebStorm

[ivanolmo]

Not sure if you fixed this yet, but I reproduced your error. The issue is in the second <Link> of your LoggedIn function. The img tag alt attribute has an error. It's currently alt=, so it's pointing to nothing. Change it to something like alt='user' and that should resolve the issue.