React related problem

import React, {useState} from 'react'

import { Tab, Nav, Button, Modal} from 'react-bootstrap'

import Conversations from './Conversations'

import Contacts from './Contacts'

import NewContactModal from './NewContactModal'

import NewConversationModal from './NewConversatioModal'

const CONVERSATIONS_KEY = 'conversations'

const CONTACTS_KEY = 'contacts'

export default function Sidebar({ id }) {

  const [activeKey, setActiveKey] = useState(CONVERSATIONS_KEY)

  const [modalOpen, setModalOpen] = useState(false)

  const conversationsOpen = activeKey === CONVERSATIONS_KEY

  function closeModal () {

    setModalOpen(false)

  }

  return (

    <div style={{ width:'250px'}} className="d-flex flex-column">

      <Tab.Container activeKey={activeKey} onSelect={setActiveKey}>

        <Nav variant="tabs" className="justify-content-center">

          <Nav.Item>

            <Nav.Link eventKey={CONVERSATIONS_KEY}>Conversations</Nav.Link>

          </Nav.Item>

          <Nav.Item>

            <Nav.Link eventKey={CONTACTS_KEY}>Contacts</Nav.Link>

          </Nav.Item>

        </Nav>

        <Tab.Content className="border-right overflow-auto flex-grow-1">

          <Tab.Pane eventKey={CONVERSATIONS_KEY}>

            <Conversations />

          </Tab.Pane>

          <Tab.Pane eventKey={CONTACTS_KEY}>

            <Contacts />

          </Tab.Pane>

        </Tab.Content>

        <div className="p-2 border-top border-right small">

          Your Id: <span className="text-muted">{id}</span>

        </div>

        <Button onClick={() => setModalOpen(true)} className="rounded-0">

          New {conversationsOpen ? 'Conversation': 'Contact'}

        </Button>     

      </Tab.Container>

      

      <Modal show={modelOpen} onHide={closeModal}>

        {conversationsOpen ?

           <NewConversationModal  closeModal={closeModal} /> :

           <NewContactModal closeModal={closeModal} />

        }   

      </Modal>

    </div>

  )

}

HERE IN THIS CODE IT IS SHOWING modalOpen is not defined
modalOpen is assigned a value but never used

so please help me how to correct this error

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Read this line closely:

const [modalOpen, setModalOpen] = useState(false)

and read this line closely:

<Modal show={modelOpen} onHide={closeModal}>

Pay attention to spelling - JavaScript certainly is.

Usually with these kinds of errors, I start with the assumption that JS is correct and I am the one that is wrong. My first instinct after finding the first line of code was to search for “modalOpen” in the code and could find no other cases - that told me something was wrong.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.