Question 202259 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Render a different div when input is filled

I have this empty input here and I want to replace the icon and the text there with the image preview when an image is inserted in it. The problem. I want to remove the "Drop app logo……." when the image preview is there. It does’nt look neat the way it is right now

const images = files.map((file) => (
    <img
      key={file.name}
      src={file.preview}
      alt="image"
      style={{ width: "50%", height: "50%" }}
    />
  ));


    <Flex width={{ sm: "340px", md: "450px" }}>
       {images && (<><div>{images}</div></>)}
       
         {images !== null && (<><Box>
          <AiOutlineCloudUpload size={30} />
          </Box>
          <Box>
            <Text fontSize="sm"> Drop app logo here or{" "}
               <Button variant="link" color="#002c8a">browse
               </Button>
            </Text>
           </Box>
           </>
           )}
    </Flex>
Tags:

2

Answers


  1. 0

    Your boolean logic is incorrect; images is an array, and in JavaScript, arrays (even empty arrays) are never falsy. So the images && (<><div>{images}</div></>) section will always render, because images is always truthy, but the images !== null && (<><Box>... block will always render too, because images is never null.

    Try something like this instead, to render images if images exist and to render the upload prompt if no images exist. (I’m also removing a spurious React fragment (<>).)

    <Flex width={{ sm: "340px", md: "450px" }}>
  {images.length > 0 && <div>{images}</div>}
       
  {images.length === 0 && (<>
    <Box>
      <AiOutlineCloudUpload size={30} />
    </Box>
    <Box>
      <Text fontSize="sm"> Drop app logo here or{" "}
        <Button variant="link" color="#002c8a">browse
        /Button>
      </Text>
    </Box>
  </>)}
</Flex>
    Login or Signup to reply.
  2. 0

    If you want to remove the text when image is loaded

    maybe you can add conditional inside <Text></Text> tag

    it will append empty string when image !== null

    const images = files.map((file) => (
    <img
      key={file.name}
      src={file.preview}
      alt="image"
      style={{ width: "50%", height: "50%" }}
    />
  ));


    <Flex width={{ sm: "340px", md: "450px" }}>
       {images && (<><div>{images}</div></>)}
       
         {images !== null && (<><Box>
          <AiOutlineCloudUpload size={30} />
          </Box>
          <Box>
            <Text fontSize="sm"> {images !== null ? "" : "Drop app logo here or "}
               <Button variant="link" color="#002c8a">browse
               </Button>
            </Text>
           </Box>
           </>
           )}
    </Flex>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search