Close parent component

Question

I have a code with which the user can select a file from their device. The Card component will display its name and operations that can be done with the file.

But my problem is that I don't know how to close this component if the user wants to cancel the action.

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

            {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>}
            
        </div>
    );
}

I have added a button which should close the entire Card component. If I add the following code

<CloseIcon onClick={() => setFileName(false)}/>

If I add the following code, then the component closes. But the next time you select a file, this component does not open (only after reloading the page).

Tell me how to close the Card component correctly so that you can open it without problems

@Priyen Mehta By default, this component is not visible to me. But after the user selects a file, this component appears. And I would like it to be possible to close it component (if the user changed his mind or made a mistake with the file) and select another file — Paul, Aug 16 '22 at 10:45

score 2 · Accepted Answer · answered Aug 16 '22 at 10:53

2

I would suggest to handle separately the card visibility and the file name value. Something like this should work:

import React, { useState, useCallback } from "react";

const DisplaySelectedFile = () => {
  const [fileName, setFileName] = useState(null);
  const [showCard, setShowCard] = useState(false);

  const handleSelectFile = useCallback(
    (file) => {
      setFileName(file);
      file && setShowCard(true);
    },
    [setFileName, setShowCard]
  );

  const handleCloseCard = useCallback(() => {
    setShowCard(false);
    setFileName(null); // add this line only if it fits your use case
  }, [setFileName, setShowCard]);

  return (
    <div>
      <SelectFileButton setFileName={handleSelectFile} />

      {showCard && (
        <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 onClick={handleCloseCard} />
          </Stack>
        </Card>
      ) || null}
    </div>
  );
}

export default DisplaySelectedFile;

answered Aug 16 '22 at 10:53

secan

2,622
1
7
24

I found a small inaccuracy in your answer. Perhaps you can tell me how to fix it: when the user has selected a file, the file is displayed. Further, this component can be closed - this also works. You can choose another file - and that also works. But if you try to load the same file again, the component does not appear. Can you suggest how to solve this? – Paul Aug 19 '22 at 08:54
Can you post your code as it is now, possibly as a working sample, and share any error message you might get, please? This would make much easier to understand what the problem is. Thanks – secan Aug 22 '22 at 07:30
I left your code unchanged (for now). There is essentially no error, there is just a flaw in the code (as I understand it). The essence of the problem from the very beginning: The user selected a file and the file name was displayed on the screen as part of the DisplaySelectedFile component. Further, if the user clicked to close this component, the component closes. At the moment everything is working well. But if the user again selects the same file after closing, then now the component is not displayed (if the user selects another file, then everything is in order) – Paul Aug 22 '22 at 08:11
Ok, but how does the fie selection work? In other words, what is the code of the `` component? My guess is you are not triggering `handleSelectFile`, because you are not passing `fileName` to the component, but without having the full picture it is hard to say – secan Aug 22 '22 at 08:23
I added SelectFileButton in my question – Paul Aug 22 '22 at 08:33
Yes, the issue seems to be in `SelectFileButton`; you might want to refer to the following posts: https://stackoverflow.com/a/40429197/14201528 and https://stackoverflow.com/a/12102992/14201528. Furthermore, in your case the file name should be passed as a prop from `` rather than be stored in the internal state of `` otherwise you risk to have discrepancies in the two components. – secan Aug 22 '22 at 08:53
If I create a new question, can you help me? I am not so long in programming and it is difficult for me to solve some points on my own – Paul Aug 22 '22 at 08:58
If someone provides you a ready-made solution that you just have to copy and paste, it will never get easier to solve those points. The two posts I linked, together with the comment about passing the file name as a prop from the parent component, should already contain the solution to your problem; you just have to apply it to your specific case. Give it a fair try before, then, if you still cannot make it work, feel free to post a new question... but a specific one about what you are struggling with, not a simple "I want to achieve this, please provide me a solution". – secan Aug 22 '22 at 09:07

Close parent component

1 Answers1