upload button should not allow upload if fields are empty

I have three input fields and an upload button.i want the upload button to be disabled and enabled if other three fields have been filled. i don't know how to go about this. i have attached the section of my code that contains the fields

the upload button is the last field in the code. how do I write this logic?

 <div className='product'>       
<>
{apiFetched && relatedPartyDetails?.map((party, index) => (
<Row key={index}>
<>
<Col lg={3}>
<Autocomplete
options={names}
getOptionLabel={(option) => (option.details?.name)}
id={"disable-clearable-buyer-" + index}
label="Party"
renderInput={(params) => (
<TextField {...params} label="Party 1" variant="standard" />
)}
onChange={(event, newValue) => {
console.log('test1');
// names.forEach((ele) => { 
//     console.log(ele.details.name);
//     console.log('hurre',party.buyer==ele.details.name);
console.log(party.buyer);
// })
// console.log(names.find((ele) => ele.details.name == party.buyer))
handleParties(event, newValue,index,'buyer');
}}
disabled={isView}
value={names.find((ele) => ele.details.name === party.buyer)}
disableClearable
/>
{error && error?.buyer && <span style={{ color: 'red' }}>{error.buyer}</span>}
</Col>
<Col lg={3}>
<Autocomplete
options={names}
getOptionLabel={(option) => ( option.details?.name)}
id={"disable-clearable-shipper-" + index}
label="Party"
renderInput={(params) => (
<TextField {...params} label="Party 2" variant="standard" />
)}
onChange={(event, newValue) => {
handleParties(event, newValue, index,'shipper');
}}
disabled={isView}
value={(names && party.shipper) && names.find((ele) => ele.details.name === party.shipper)}
disableClearable
/>
{error && error?.shipper && <span style={{ color: 'red' }}>{error.shipper}</span>}
</Col>
<Col lg={4}>
<div className='d-flex align-items-center Related_parties'>
<p className='mb-0 title-color'>Relation</p>
<Autocomplete
className='ms-3 mb-3'
options={[...parties]}
getOptionLabel={(option) => option.label}
id={"disable-clearable-relation-party-" + party.party_relation}
label="Party Relation"
renderInput={(params) => (
<TextField {...params} label="Party Relation " variant="standard" />
)}
defaultValue={relatedPartyDetails.party_relation}
getOptionSelected={(option) => option.label === 'test'}
onChange={(event, newValue) => { handleRelation(event, newValue, index); setRelation(parties); console.log('parties', parties);console.log('party', party); }}
value={parties.find((ele) => ele.value == party.party_relation)}
disableClearable
/>
</div>
{error && error?.party_relation && <span style={{ color: 'red' }}>{error.party_relation}</span>}
</Col>
{relation && <Col lg={2}>
<div className='drag-and-drop'>
<DropzoneArea
Icon="none"
filesLimit={1}
showPreviews={true}
defaultValue={relatedPartyDetails.upload_evidence}
showPreviewsInDropzone={false}
useChipsForPreview
previewGridProps={{ container: { spacing: 1, } }}
dropzoneText='Upload Evidence'
previewText=""
onChange={(file) => handleChangeFile(file[0], index)}
/>
</div>
{error && error?.upload_evidence && <span style={{ color: 'red' }}>{error.upload_evidence}</span>}
</Col>}
</>
</Row>
))}
</>
</div>
</div>

if you are using material-ui-dropzone, it actually creates an uncontrolled Material-UI Dropzone. If it is uncontrolled, you are not getting any out of the box support for disabling the component but instead you can apply a css property on the parent div of DropzoneArea

 <div className='drag-and-drop' style={{ pointerEvents: checkIfConditionIsFulfilled? "none" : "all }} >
<DropzoneArea
Icon="none"
filesLimit={1}
showPreviews={true}
defaultValue={relatedPartyDetails.upload_evidence}
showPreviewsInDropzone={false}
useChipsForPreview
previewGridProps={{ container: { spacing: 1, } }}
dropzoneText='Upload Evidence'
previewText=""
onChange={(file) => handleChangeFile(file[0], index)}
/>
</div>
style={{ pointerEvents: checkIfConditionIsFulfilled? "none" : "all }}

You will need to write checkIfConditionIsFulfilled on the basis of your states.

Add a state variable to hold the field values and an initial state where the upload button is disabled

const [fieldValues, setFieldValues] = useState({ party1: '',party2: '', partyRelation: '', isUploadButtonDisabled: true });

Update the handleParties and handleRelation functions to update the field values and check if all fields are filled:

const handleParties = (event, newValue, index, partyType) => {
setFieldValues(prevValues => ({
...prevValues,
[partyType]: newValue ? newValue.details.name : ''
}));
};
const handleRelation = (event, newValue, index) => {
setFieldValues(prevValues => ({
...prevValues,
partyRelation: newValue ? newValue.value : ''
}));
};

Update the JSX:

<Button disabled={ fieldValues.party1 === '' || fieldValues.party2 === '' || fieldValues.partyRelation === '' }> Upload </Button>

Hope it helps!! ^^