How to disable a div using condition in React - reactjs

Question

Initially I have three div In first div I am able to upload pdf in second div I am able upload excel file in third div I am able to upload audio file. now What I am trying to do is If I uploaded pdf file successfully then I need to disable Excel file div so I cannot upload excel file please help to achieve this
This is my code
This is App.js
import React, { useState } from "react";
import 'antd/dist/antd.css';
import './index.css';
import { Row, Col, Button, Modal, Upload, message, Divider } from 'antd';
import { FilePdfOutlined, FileExcelOutlined, AudioOutlined } from '#ant-design/icons';
import "./App.css";
const App = () => {
const [visible, setVisible] = useState(false)
const [disableDiv, setDisableDiv] = useState(disable)
const showPopUp = () => {
setVisible(true)
}
const closePopUp = () => {
setVisible(false)
}
const props = {
beforeUpload: file => {
const characterValidation = file
// setFile(characterValidation)
console.log(characterValidation)
}
}
return (
<div>
<Row>
<Col span={24}>
<Button onClick={() => showPopUp()} type="primary">Show PopUp</Button>
<Modal
visible={visible}
onCancel={closePopUp}
onOk={closePopUp}
>
<div style={{ display: "flex" }}>
<div style={{ marginLeft: "5px" }}>
<Upload accept=".pdf" {...props}>
<FilePdfOutlined style={{ fontSize: "25px", backgroundColor: "red", padding: "10px", borderRadius: "50%" }} />
<h6>Upload Pdf</h6>
</Upload>
</div>
<div style={{ marginLeft: "5px" }} disabled={disableDiv}>
<Upload accept=".xls .xlsx" {...props}>
<FileExcelOutlined style={{ fontSize: "25px", backgroundColor: "red", padding: "10px", borderRadius: "50%" }} />
<h6>Upload Excel</h6>
</Upload>
</div>
<div style={{ marginLeft: "5px" }}>
<Upload accept="audio/*" {...props}>
<AudioOutlined style={{ fontSize: "25px", backgroundColor: "red", padding: "10px", borderRadius: "50%" }} />
<h6>Upload Excel</h6>
</Upload>
</div>
</div>
</Modal>
</Col>
</Row>
</div>
)
}
export default App
This is App.css
.ant-modal-close-x > span {
display: none;
}
.ant-upload-list:before {
content:"Attachments:";
}
.ant-upload-list {
display: block;
margin-bottom: 30pt;
margin-left: 0;
font-size: 16px;
font-weight: bold;
border-top:1px solid red;
}

Answer 1

Ok so as far as I could understand you want to prevent the user from interacting with a specific input under a certain condition.
In your case you want to disable the Upload input component when the user has uploaded the pdf file in the previous Upload component.
One way to do that is to set an onChange event handler on the pdf Upload component and when the file is successfully uploaded you can then disable the excel Upload component.
Here is how this would look in your example (without changing how your code worked before):
import React, { useState } from "react";
import 'antd/dist/antd.css';
import './index.css';
import { Row, Col, Button, Modal, Upload, message, Divider } from 'antd';
import { FilePdfOutlined, FileExcelOutlined, AudioOutlined } from '#ant-design/icons';
import "./App.css";
const App = () => {
const [visible, setVisible] = useState(false)
const [isExcelUploadDisabled, setIsExcelUploadDisabled] = useState(false);
const showPopUp = () => {
setVisible(true)
}
const closePopUp = () => {
setVisible(false)
}
const props = {
beforeUpload: file => {
const characterValidation = file
// setFile(characterValidation)
console.log(characterValidation)
}
}
const PDFUploadProps = {
accept: '.pdf',
name: 'PDF file name',
action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
headers: {
authorization: 'authorization-text'
},
onChange(info) {
console.log(info);
if (info.file.status !== 'uploading') {
console.log('uploading');
}
if (info.file.status === 'done') {
setIsExcelUploadDisabled(true);
}
//bonus: enable the excel upload again when the user removes the file
if (info.file.status === 'removed') {
setIsExcelUploadDisabled(false);
} else if (info.file.status === 'error') {
console.error('error');
}
},
...props
};
const excelUploadProps = {
accept: '.xls, .xlsx',
name: 'excel file name',
action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
headers: {
authorization: 'authorization-text'
},
disabled: isExcelUploadDisabled
...props
};
return (
<div>
<Row>
<Col span={24}>
<Button onClick={() => showPopUp()} type="primary">Show PopUp</Button>
<Modal
visible={visible}
onCancel={closePopUp}
onOk={closePopUp}
>
<div style={{ display: "flex" }}>
<div style={{ marginLeft: "5px" }}>
<Upload {...PDFUploadProps}>
<FilePdfOutlined style={{ fontSize: "25px", backgroundColor: "red", padding: "10px", borderRadius: "50%" }} />
<h6>Upload Pdf</h6>
</Upload>
</div>
<div style={{ marginLeft: "5px" }}>
<Upload {...excelUploadProps}>
<FileExcelOutlined style={{ fontSize: "25px", backgroundColor: "red", padding: "10px", borderRadius: "50%" }} />
<h6>Upload Excel</h6>
</Upload>
</div>
<div style={{ marginLeft: "5px" }}>
<Upload accept="audio/*" {...props}>
<AudioOutlined style={{ fontSize: "25px", backgroundColor: "red", padding: "10px", borderRadius: "50%" }} />
<h6>Upload Excel</h6>
</Upload>
</div>
</div>
</Modal>
</Col>
</Row>
</div>
)
}
export default App
Here is also a minimal example of the same functionality here.