Quiero renderizar condicionalmente una imagen en mi componente de reacción así: {noTasks && <Image />} Funciona bien en Firefox, pero no en Chrome, aunque Chrome también detecta noTasks === true. ¿Que me estoy perdiendo aqui?
La <Image /> en sí misma no tiene ningún estilo o posicionamiento especial
import React from 'react' import styled from 'styled-components' const StyledImg = styled.img` width: 80%; margin-bottom: 50px; ` const Image = () => <StyledImg src='/assets/toDo.webp' alt='a woman with a task planner' /> export default Image const ToDos = () => { const tasks = useSelector((state) => state.todos.items) const noTasks = useSelector((state) => state.todos.items.length === 0) const dispatch = useDispatch() const trashCanIcon = <FontAwesomeIcon icon={faTrashAlt} /> /* const editIcon = <FontAwesomeIcon icon={faPen} /> */ const onToggleIsComplete = (id) => { dispatch(todos.actions.toggleIsComplete(id)) } return ( <ContainerDiv> {noTasks && <Image />} {tasks.map((task) => ( <StyledForm key={task.id} category={task.category} completed={task.isComplete} > <ToDoLabel completed={task.isComplete} htmlFor='completed'>{task.task} </ToDoLabel> <div> <input id='completed' type='checkbox' onChange={() => onToggleIsComplete(task.id)} /> {/* <button >{editIcon}</button> */} <button onClick={() => dispatch(todos.actions.removeToDo(task.id))}> {trashCanIcon}</button> </div> <StyledParagraph>{moment(task.newDate).format("D. MM. YYYY")}</StyledParagraph> </StyledForm> ))} </ContainerDiv> ) }Según su descripción, es posible que el problema esté relacionado con la implementación del componente <Image /> .
Puede verificar la fuente de la página utilizando las herramientas de desarrollo para averiguar cómo React representa el componente ToDos (clic derecho --> inspeccionar en Chrome). ¿Puedes confirmar si ya lo has hecho?
Mi conjetura es que podría ser un problema de estilo en el que se representa el contenido del componente Image (hay una etiqueta img en el origen de la página), pero con un estilo que no es visible. Por ejemplo, podría colocarse de forma absoluta, lo que en algunos casos puede provocar un comportamiento diferente entre los navegadores.
También puede deberse a algún detalle de implementación en el componente <Image /> . Al proporcionar un poco más de contexto sobre el componente <Image /> , los siguientes ayudantes pueden tener más facilidad para encontrar las posibles causas de su problema.