En React, intento cambiar la visualización de 2 elementos cuando se hace clic en ciertos botones. Quiero que se muestre el título o una entrada para editar el título. Mi título div tiene un nombre de clase de una variable llamada 'titleDisplay' con el valor de 'isDisplayed'. Tengo una función configurada para cambiarla a 'notDisplayed'
let titleDisplay = 'isDisplayed'; let editDisplay = 'notDisplayed'; const editDisplayed = () => { editDisplay = 'isDisplayed' titleDisplay = 'notDisplayed' } <button onClick={editDisplayed} id="edit-btn">EDIT</button> <div className={titleDisplay}> <h2 className='indieNotebookTitle'>{notebook?.title}</h2> </div> .isDisplayed { display: block; } .notDisplayed { display: none; }No estoy seguro de lo que estoy haciendo mal ya que onClick ha estado trabajando con funciones hasta ahora.
React solo volverá a renderizar un componente en respuesta a un cambio de estado. La reasignación de una variable, por sí sola, casi nunca tiene efectos secundarios, a menos que la variable se utilice más adelante. Su reasignación de editDisplay solo sería visible para otras funciones dentro del mismo enlace de componente (algo muy inusual de ver en React y, por lo general, un indicador de un problema lógico).
En su lugar, debe hacer que las variables que intente cambiar tengan estado. Además, considere usar un valor booleano en lugar de un valor de cadena. Es posible que pueda usar solo un valor de estado único en su lugar, para alternar entre el título y la edición.
const [editingTitle, setEditingTitle] = useState(false); <button onClick={() => setEditingTitle(false)} id="edit-btn">EDIT</button> <div className={editingTitle ? 'isDisplayed' : 'notDisplayed'}> <h2 className='indieNotebookTitle'>{notebook?.title}</h2> </div>