Conditional rendering doesn't work in Chrome-CodePudding

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 event 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 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>
  )
}

CodePudding user response：

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.