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> 
