• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

250
Vistas
ternary operator not being hit, after button click and reverting back to previous component

I have been trying to wrap my head around why my ternary operator isn't being hit when I have set isOpen to true.

I have this in my component.

{isOpen ? (
        <div>
          <div className="mt-6 flex flex-col">
            <button className="mb-1 rounded bg-blue-500 px-4 py-3 capitalize text-white duration-100 ease-in-out hover:bg-blue-700">
              <span className="text-center">edit</span>
            </button>
            <button
              className="rounded bg-red-500 px-4 py-3 capitalize text-white duration-100 ease-in-out hover:bg-red-700"
              onClick={deleteContact}
            >
              <span className="text-center tracking-wide">Bye!</span>
            </button>
          </div>
        </div>
      ) : (
        <div>
          <div className="mt-6 flex flex-col">
            <button className="mb-1 rounded bg-blue-500 px-4 py-3 capitalize text-white duration-100 ease-in-out hover:bg-blue-700">
              <span className="text-center">edit</span>
            </button>
            <button
              className="rounded bg-red-500 px-4 py-3 capitalize text-white duration-100 ease-in-out hover:bg-red-700"
              onClick={() => setIsOpen(true)}
            >
              <span className="text-center tracking-wide">delete</span>
            </button>
          </div>
        </div>
      )}

When I click the following button:

<button
              className="rounded bg-red-500 px-4 py-3 capitalize text-white duration-100 ease-in-out hover:bg-red-700"
              onClick={() => setIsOpen(true)}
            >
              <span className="text-center tracking-wide">delete</span>
            </button>

It seems the ternary operator isn't being fired or maybe the isOpen isn't being set to true.

Its this delete button here:

enter image description here

But when clicking the <ShowContact /> just gets removed from the tree instead of hitting the ternary.

The whole repo is here if you want to replicate https://github.com/mrpbennett/contact_fastapi/tree/react-fe

almost 3 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

I have resolved this by moving my click handler ... as

The toggle action(setShowContact) of contact detailed is linked to div tag (container of whole contact info).

{contacts.map((contact) => (
            <div key={contact.id}>
              {showContact === contact.id ? (
                <ShowContact contactId={contact.id} open={true} />
              ) : (
                <div
                  className="border-b border-gray-200 p-4 py-2 text-left capitalize text-gray-700 hover:bg-gray-200"
                  onClick={() =>
                    setShowContact((show) =>
                      show === contact.id ? null : contact.id
                    )
                  }
                >
                  <span className="font-bold">{contact.first_name}</span>{' '}
                  {contact.last_name}
                </div>
              )}
            </div>
          ))}
almost 3 years ago · Juan Pablo Isaza Denunciar

0

I think you need to get rid of line 14 window.location.reload(true); in your "ShowContact" component. That is causing your whole application to reload, which is then reinitializing "isOpen" state to be false again.

almost 3 years ago · Juan Pablo Isaza Denunciar

0

Sounds like the parent component is re-instantiating the child component ShowContact. The parent needs to memoize whatever renders ShowContact to avoid it being recreated from scratch, causing isOpen to initialize to false.

There are numerous ways that can occur, such as assigning the render result to a variable and inserting it in the JSX:

  const showContactRender = ( <ShowContact ... /> );

  return (
    <div>
      ...
      {showContactRender}
      ...
    </div>
  );

In the above example, every time a re-render is triggered in the parent, it recreates the component stored in showContactRender. useMemo avoids recreating it if its inputs don't change. However a better way would be to avoid that if possible and insert <ShowContact> directly into the return JSX.

Note that the problem outlined above may not be in the direct parent, but the parent's parent, or any component above it. Set breakpoints everywhere to see how often it gets re-rendered.

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda