I want to conditionally render an image in my react component like so: {noTasks && <Image />}
It works just fine in Firefox, but not in Chrome, even though Chrome also detects noTasks === true. What am I missing here?
The <Image /> itself doesn't have any special styling or positioning
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 Imageconst 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>
)
}Based on your description it's possible that the issue is with the implementation of the <Image /> component.
You could check the source of the page by using developer tools to find out how React renders the ToDos component (right click --> inspect on Chrome). Can you confirm whether you've already done this?
My guess is that it could be a styling issue where the content of Image component is rendered (there's an img tag in the source of the page), but styled in a way where it's not visible. It could for instance be positioned absolutely, which in some instances can cause differing behaviour between browsers.
It can also be caused by some implementation detail in the <Image /> component. By providing a bit more context about the <Image /> component, following helpers may have an easier time finding possible causes for your problem.