Unhandled Runtime Error ReferenceError: inputEmail is not defined

import { Avatar, Button } from '@material-ui/core'
import styled from 'styled-components'
import React from 'react'
import ChatIcon from '@mui/icons-material/Chat';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import SearchIcon from '@mui/icons-material/Search';
import { IconButton } from '@mui/material';
import * as EmailValidator from 'email-validator';

function Sidebar() {
  
    const createChat = () =>{
        const inputEmail = prompt
        ('Enter an email address for the user you wish to chat with')
    };

    if (!inputEmail) return null;

    if (EmailValidator.validate(inputEmail)){
        // we need to add chat in db colection
    }





    return (
    <Container>
        <Header>
            <UserAvatar />

            <IconsContainer>

                <IconButton>
                    <ChatIcon />
                </IconButton>

                <IconButton>
                    <MoreVertIcon />
                </IconButton>

            </IconsContainer>
        </Header>

        <Search>
            <SearchIcon />
            <SearchInput placeholder='Search from chats'/>
        </Search>

        <SidebarButton onClick={createChat}>Start new chat</SidebarButton>

        {/* list of chats */}



    </Container>
  )
}

export default Sidebar

const Container = styled.div``;

const Header = styled.div`
    display: flex;
    position: sticky;
    top: 0;
    z-index: 1;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    height: 80px;
    border: 1px solid whitesmoke;
`;

const Search = styled.div`
    display: flex;
    align-items: center;
    padding: 20px;
    border-radius: 2px;
`;

const UserAvatar = styled(Avatar)`
    cursor: pointer;
`;

const IconsContainer = styled.div``;

const SearchInput = styled.input`
    outline-width: 0;
    border: none;
    flex: 1;
`;

const SidebarButton = styled(Button)`
    width: 100%;

    &&&{
        border-top: 1px solid whitesmoke;
        border-bottom: 1px solid whitesmoke;
    }
`;

Ответы (0 шт):