Component appearance only after file selection-CodePudding

There is a button on my website page that allows the user to select a file from their device.

Next, I display the file name in a special box, where the user is prompted to convert this file to the desired format.

However, this box, in which the file is displayed, is always present on the page (in the code below, this box is placed in the Card component).

I would like this box to appear only when the user selects a file. And if the user wants to cancel the action, then he could close this box (icon CloseIcon in my code).

Tell me how can this be done?

export default function DisplaySelectedFile() {
    const [fileName, setFileName] = useState("");
    return (
        <div>
            <SelectFileButton setFileName={setFileName} />

                <Card sx={styles.CommonStyle}>
                    <Stack spacing={10} direction="row" style={{paddingTop: "20px", paddingLeft: "10px"}}>
                        <div>{fileName}</div>

                        <Stack spacing={3} direction="row">
                            <div>Convert to</div>
                            <ConvertToFormatFile></ConvertToFormatFile>
                        </Stack>

                        <Button>CONVERT</Button>
                        <CloseIcon/>
                        
                    </Stack>
                </Card>
            
        </div>
    );
}

CodePudding user response：

You can check the length if the fileName and show the card

{fileName && <Card sx={styles.CommonStyle}>
        <Stack
          spacing={10}
          direction="row"
          style={{ paddingTop: '20px', paddingLeft: '10px' }}
        >
          <div>{fileName}</div>

          <Stack spacing={3} direction="row">
            <div>Convert to</div>
            <ConvertToFormatFile></ConvertToFormatFile>
          </Stack>

          <Button>CONVERT</Button>
          <CloseIcon />
        </Stack>
      </Card>}