React - conditional rendering text

Question

conditionally rendering the text based on whether a file has been selected or not. Here's how you can update your code to display "Maximum upload file size: 100MB" by default and switch to "Selected file: {fileName}" once a file is chosen:

const CSVUploader = ({ onUpload }) => {
  const [file, setFile] = useState(null);
  const [fileName, setFileName] = useState('');
  const router = useRouter();

  const handleFileChange = e => {
    const selectedFile = e.target.files[0];
    setFile(selectedFile);
    setFileName(selectedFile ? selectedFile.name : ''); // Set filename if file is selected
  };
  
  return (
    <div>
      // Display filename if selected
      {file ? ( 
        <p
          className="selected-file"
          css={css`
            margin-top: 5px;
            font-size: 12px;
            color: #888;
          `}
        >
          Selected file: {fileName}
        </p>
      ) : (
        <p
          className="upload-info"
          css={css`
            margin-top: 5px;
            font-size: 12px;
            color: #888;
          `}
        >
          Maximum upload file size: 100MB
        </p>
      )}
    </div>
  );
};

const errorMessage = css`
  color: red;
`;

export default CSVUploader;

 

Answer 1

When click the button, shows 'Uploading'. by default shows 'Upload CSV'

<button
  css={css`
    background-color: #2056ab;
    border-radius: 4px;
    font-size: 20px; 

    &:hover {
      background-color: #1d4481;
    }
  `}
  onClick={handleUpload}
  disabled={loading}
>
  {loading ? 'Uploading...' : 'Upload CSV'}
</button>