Johann Alvares
Published in : 2022-09-08

TypeError: Cannot read properties of null (reading 'scrollTop') in jest

React js

.test.tsx

/** * @jest-environment jsdom */import * as React from "react";import { act } from "react-dom/test-utils";import * as ReactDOM from "react-dom/client";import Video from "../pages/video/Video";import renderer from "react-test-renderer";import { render, screen } from "@testing-library/react";import { initialState } from "../app/slice/chatSlice";import configureStore from "redux-mock-store";import { Provider } from "react-redux";import { store } from "../app/newStore";import NewChatMobile from "../pages/NewChatMobile/NewChatMobile";import ChatComponent from "../components/chat/Message";import ChatList from "../components/chat/ChatList";import Message from "../components/chat/Message";import MobileChatComponent from "../components/chat/MobileChatComponent";import MsgComponent from "../components/chat/MsgComponent";import NewChatModal from "../components/chat/NewChatModal";// This component helps get rid of the following error :: react-i18nextjest.mock("react-i18next", () => ({ useTranslation: () => ({ t: (key) => key }),}));// This helps get rid of :: parentInstance.children.indexOfjest.mock("react-dom", () => { const original = jest.requireActual("react-dom"); return { ...original, createPortal: (node) => node, };});describe("Snapshot testing of Chat Components", () => { test("Snapshot for NewChatMobile.tsx Component", async () => { const renderedComponent = renderer .create( <Provider store={store}> <NewChatMobile /> </Provider> ) .toJSON(); expect(renderedComponent).toMatchSnapshot(); }); test("Snapshot for ChatComponent.tsx Component", () => { const renderedComponent = renderer .create( <Provider store={store}> <ChatComponent /> </Provider> ) .toJSON(); expect(renderedComponent).toMatchSnapshot(); }); test("Snapshot for ChatList.tsx Component", () => { const renderedComponent = renderer .create( <Provider store={store}> <ChatList /> </Provider> ) .toJSON(); expect(renderedComponent).toMatchSnapshot(); }); test("Snapshot for Message.tsx Component", () => { const renderedComponent = renderer .create( <Provider store={store}> <Message /> </Provider> ) .toJSON(); expect(renderedComponent).toMatchSnapshot(); }); test("Snapshot for MobileChatComponent.tsx Component", async () => { const renderedComponent = renderer .create( <Provider store={store}> <MobileChatComponent /> </Provider> ) .toJSON(); expect(renderedComponent).toMatchSnapshot(); }); test("Snapshot for MsgComponent.tsx Component", () => { const renderedComponent = renderer .create( <Provider store={store}> <MsgComponent /> </Provider> ) .toJSON(); expect(renderedComponent).toMatchSnapshot(); }); test("Snapshot for NewChatModal.tsx Component", async () => { const renderedComponent = renderer .create( <Provider store={store}> <NewChatModal show={true} handleCloseParent={() => {}} /> </Provider> ) .toJSON(); expect(renderedComponent).toMatchSnapshot(); });});

Another file > 

import React from 'react';import { useState, useEffect, useRef } from "react";import Backdrop from "@mui/material/Backdrop";import Box from "@mui/material/Box";import Modal from "@mui/material/Modal";import Fade from "@mui/material/Fade";import TextField from "@mui/material/TextField";import { styled } from "@mui/material/styles";import Radio, { RadioProps } from "@mui/material/Radio";import RadioGroup from "@mui/material/RadioGroup";import FormControlLabel from "@mui/material/FormControlLabel";import FormControl from "@mui/material/FormControl";import CountryDropdown from "../../layouts/countryDropdown/CountryDropdown";import FormLabel from "@mui/material/FormLabel";import { useDebounce } from 'usehooks-ts'import { getCampaignsData } from "../../apis/campaigns/campaigns";import DropdownInupt from "../shared/Dropdown";import config from "../../env.json";import AssociatedPresList from "../../layouts/AssociatedPrescriber/AssociatedPresList";import { getFormatedPhoneNumber } from '../../utils/phoneNumberUtil';import { sendMessageApi } from '../../apis/chat/messageApi'import { parsePhoneNumber } from "react-phone-number-input";import { addNewContact } from '../../apis/contacts/contactsApi'import Paper from '@mui/material/Paper';import axios from "axios";import { useSelector, useDispatch } from 'react-redux';import "./NewChatModal.css";import GenericButton from "../../layouts/button/Button";import { debug } from "console";import { setChatDetails, setRefreshChatList } from "../../app/slice/chatSlice";import { useTranslation } from "react-i18next";const BpIcon = styled("span")(({ theme }) => ({ borderRadius: "50%", width: 16, height: 16, boxShadow: theme.palette.mode === "dark" ? "0 0 0 1px rgb(16 22 26 / 40%)" : "inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)", backgroundColor: theme.palette.mode === "dark" ? "#394b59" : "#f5f8fa", backgroundImage: theme.palette.mode === "dark" ? "linear-gradient(180deg,hsla(0,0%,100%,.05),hsla(0,0%,100%,0))" : "linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))", ".Mui-focusVisible &": { outline: "2px auto rgba(19,124,189,.6)", outlineOffset: 2, }, "input:hover ~ &": { backgroundColor: theme.palette.mode === "dark" ? "#30404d" : "#ebf1f5", }, "input:disabled ~ &": { boxShadow: "none", background: theme.palette.mode === "dark" ? "rgba(57,75,89,.5)" : "rgba(206,217,224,.5)", },}));const BpCheckedIcon = styled(BpIcon)({ backgroundColor: "#734BD1", backgroundImage: "linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))", "&:before": { display: "block", width: 16, height: 16, backgroundImage: "radial-gradient(#fff,#fff 28%,transparent 32%)", content: '""', }, "input:hover ~ &": { backgroundColor: "#734BD1", },});// Inspired by blueprintjsfunction BpRadio(props: RadioProps) { return ( <Radio sx={{ "&:hover": { bgcolor: "transparent", }, }} disableRipple color="default" checkedIcon={<BpCheckedIcon />} icon={<BpIcon />} {...props} /> );}const style = { position: "absolute" as "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", width: "30%", borderRadius: "1rem", padding: ".5rem", bgcolor: "white", border: "none",};export default function NewChatModal({ show, handleCloseParent }) { const dispatch = useDispatch() const { t } = useTranslation(); const [othersName, setOthersName] = useState(""); const [assoPrescName, setAssoPrescName] = useState(""); const [othersPhone, setOthersPhone] = useState(""); const [hiddenPresList, setHiddenPresList] = useState(true); const [assoPresc, setAssoPresc] = useState({ Id: '' }); const [post, setPost] = useState([]); const [disabled, setDisabled] = useState(true); const [formType, setFormType] = useState(true); const [templateValue, setTemplateValue] = useState < any > ({}); const [campaignId, setCampaignId] = useState(0) const [templateId, setTemplateId] = useState(0); const [templateText, setTemplateText] = useState('') const [isSMS, setIsSms] = useState(false); const [pageSize, setPageSize] = useState(10); const [page, setPage] = useState(0); const [campaign, setCampaign] = useState([]); const [activeCampaign, setActiveCampagign] = useState(1000);//userId const [template, setTemplate] = useState < any > ([]) const [othersData, setOthersData] = useState([]) const [othersDatahidden, setOthersDataHidden] = useState(true) const [selectedOthers, setSelecteedOthers] = useState < any > ({}) const debouncedValue = useDebounce < string > (othersName, 350); const [assets, setAssets] = useState([]) const [disableBrandInput, setDisableBrandInput] = useState(true) const [phoneError, setPhoneError] = useState(false); const [loading, setLoading] = useState(false); const [refreshTemplate, setRefreshTemplate] = useState(true); const [associated, setAssociated] = useState < any > ({}) const [isForm, setIsForm] = useState(false) const [formQuestion, SetFromQuestion] = useState(""); const [forms, setForms] = useState([]) const [selectedForm, setSelectForm] = useState < any > ({}) const [optedOut, setOptedOut] = useState(false); const [formsValues, setFormValues] = useState < any > ([]) const refForm = useRef < any > (null); // const { // data: post, // isFetching, // isSuccess, // } = useGetPrescribersQuery({ // page: 0, // pageSize: 5, // search: assoPrescName, // }); // const pullTemplateData = (data) => { // console.log(data.length); // LOGS DATA FROM CHILD (My name is Dean Winchester... &) // // { ? : ''} // if (data.length > 0) { // setTemplateValue(true); // } else { // return null; // } // }; useEffect(() => { console.log(axios.CancelToken.source()); getTemplatesFromCampign() getFormsData(1001) }, []); const getContactsData = (value) => { // useGetContactsQuery({ // page:this.state.page, // pageSize:this.state.pageSize, // search:this.state.search // }) // const DATATEMP = useGetContactsQuery({ // page:this.state.page, // pageSize:this.state.pageSize, // search:this.state.search // }) // console.log(DATATEMP); debugger; if (value.length > 2) { axios .get( config.REACT_APP_CONTACTS_API_BASE + "/contact?IsPrescriberOnly=false&Page=" + 0 + "&PageSize=" + pageSize + "&Search=" + value, { headers: { Authorization: "Bearer " + sessionStorage.getItem("login"), }, } ) .then((res) => { setOthersData(res.data.data.filter((x: any) => x.Is_Prescriber == "N")) setPost(res.data.data.filter((x: any) => x.Is_Prescriber == "Y")); }); } else { setOthersDataHidden(true) setOthersData([]) setPost([]); setHiddenPresList(true); } }; const checkStopTyping = (e) => { var timeout = setTimeout(function () { }, 0); clearTimeout(timeout); /// clear timeout if user is typing timeout = setTimeout( function () { getContactsData(assoPrescName); }, 500 /// Time in milliseconds ); }; useEffect(() => { // Do fetch here... // Triggers when "debouncedValue" changes setOthersDataHidden(false) getContactsData(debouncedValue); }, [debouncedValue]) const setPrescriber = (x: any) => { console.log(templateText) setAssoPrescName(x.AcctFull_Nm); setAssoPresc(x); setOthersPhone(getNumberFromItem(x)); setHiddenPresList(true); setDisabled(false); // setDisableBrandInput(false) brandInputdisable(true, (x.AcctPh_Nbr.length > 0), true) setOptedOut(x.Opt_In == "N"); }; const getNumberFromItem = (item) => { debugger if (item.AcctPh_Nbr) { if (item.AcctPh_Nbr.indexOf("+") >= 0) { return item.AcctPh_Nbr } else return '+' + item.IntlCallPfx_Nbr + item.AcctPh_Nbr } else return "" } async function addContact() { // const { data: post, isFetching, isSuccess } =await useAddContactQuery({ // AcctPh_Nbr:othersPhone, // Prescriber_Id:x.Id, // AcctFull_Nm:othersName, // }) // if(isSuccess){ // alert('succee') // ; // } // handleCloseParent() let payload = { AcctPh_Nbr: othersPhone, Prescriber_Id: assoPresc.Id as any, AcctFull_Nm: othersName, IsPrescriber: false, }; console.log(payload); axios .post( config.REACT_APP_CONTACTS_API_BASE + "/contact", { AcctPh_Nbr: othersPhone, Prescriber_Id: assoPresc.Id as any, AcctFull_Nm: othersName, IsPrescriber: false, }, { headers: { Authorization: "Bearer " + sessionStorage.getItem("login"), }, } ) .then((res) => { handleCloseParent(true); }) .catch((err) => { handleCloseParent(false); }); } const sendMessageForPresOrOthers = (formData) => { if (formType) { //prescriber formData.append("role_id", '0'); formData.append("recipient_id", assoPresc.Id); formData.append("recipient_name", assoPresc['AcctFull_Nm']); formData.append("physcian_id", assoPresc.Id); sendMessageApi(formData, (res) => { //console.log(res) dispatch(setChatDetails( { chatId: assoPresc.Id, chatIsPrescriber: true, showChat: true, chatName: assoPresc['AcctFull_Nm'] })) dispatch(setRefreshChatList(true)) setLoading(false); reSetFormInputs(true); handleCloseParent(true); }) } else { //others if (!selectedOthers.Id) { let phn: any = parsePhoneNumber(othersPhone); let payload = { AcctPh_Nbr: phn.nationalNumber, Prescriber_Id: [associated.Id], AcctFull_Nm: othersName, IntlCallPfx_Nbr: phn.countryCallingCode } addNewContact(payload, (res: any) => { if (res) { formData.append("recipient_id", res.Id); formData.append("recipient_name", othersName); formData.append("role_id", '1'); formData.append('association_id', res.Prescribers[0].Association_Id) formData.append("physcian_id", res.Prescribers[0].Id); sendMessageApi(formData, (res) => { //console.log(res) dispatch(setRefreshChatList(true)) dispatch(setChatDetails( { chatId: res.Id, chatIsPrescriber: false, showChat: true, chatName: othersName })) setLoading(false); reSetFormInputs(true); handleCloseParent(true); }) } else { } }) } else { formData.append("recipient_id", selectedOthers.Id); formData.append("recipient_name", othersName); formData.append("role_id", '1'); formData.append('association_id', selectedOthers.Prescribers[0].Association_Id) formData.append("physcian_id", selectedOthers.Prescribers[0].Id); sendMessageApi(formData, (res) => { //console.log(res) dispatch(setRefreshChatList(true)) dispatch(setChatDetails( { chatId: selectedOthers.Id, chatIsPrescriber: false, showChat: true, chatName: othersName })) setLoading(false); reSetFormInputs(true); handleCloseParent(true); }) } } } const sendMessage = () => { // let data=messageData[0]; // console.log(contactData); setLoading(true); let formData = new FormData(); debugger formData.append("recipient_phone", othersPhone); formData.append("Campaign_ID", '1000')//templateValue.campaginId.toString()); formData.append('wave_id', templateValue.mainWaveId)//templateValue.waveId.toString()) formData.append('product_id', '1000')//templateValue.productId.toString()) if (!isSMS) { formData.append("channel", "SMS"); } else { formData.append("channel", "whatsa"); } debugger if (isForm) { let fdata: any = new FormData(refForm.current) let details: any = []; for (const [key, value] of fdata) { details.push({ "idOfFieldToAskFromEmp": JSON.parse(key), "valueOfFieldToAskFromEmp": value }) } let formPay = { "formId": selectedForm.FormId, "fieldDetails": details, "recipientId": assoPresc.Id, "recipientType": formType ? "PRESCR" : 'ASSPRS' } console.log(JSON.stringify(formPay)) axios.post('//p360zingformsapi.azurewebsites.net/api/formRequest', formPay).then((res: any) => { console.log(res.data) let temptest = templateText.toString(); if (temptest.indexOf('shorturl') >= 0) formData.append("template", templateText.toString().replace('[shorturl_1]', res.data.FormUrl)); else formData.append("template", templateText + " " + res.data.FormUrl); formData.append('urls', res.data.FormUrl) sendMessageForPresOrOthers(formData); }) .catch(err => { setLoading(false) }) } else { formData.append("template_id", templateId.toString()); formData.append("template", templateText.toString()); sendMessageForPresOrOthers(formData); } } const setChat = (post: any) => { dispatch(setChatDetails( { chatId: post.Id, chatIsPrescriber: post.Is_Prescriber == "Y", showChat: true, chatName: post.AcctFull_Nm })) window.location.href = "/chat"; } const TemplatesForms = [ { "formId": 1000, "formName": "MIR", "fieldName": "Question", "fieldType": "string", "File_Nm": "MIR Form", waveId: '1000', form: true, productId: '1000', campaginId: '1000', Template_Val: 'As per your request. I have created the MIR form. Please review and submit the form here: [shorturl_1]', isForm: true, Id: 7000 } ] const getTemplatesFromCampign = () => { debugger getCampaignsData({ page: 0, pageSize: 10 }, (res) => { if (res.length > 0) { debugger let tempAssets: any = []; let campaigns: any = []; let waves: any = []; let products: any = []; debugger res.map((x: any) => { debugger campaigns.push(x); x.type = "Campaign"; x.idName = ["type", "CampaignName", "CamapignId"]; x.labelName = "CampaignName"; x.childName = "WaveDetails"; x.WaveDetails.map((y: any) => { waves.push(y); y.type = "Wave"; y.idName = ["type", "WaveName", "WaveId"]; y.labelName = "WaveName"; y.childName = "ProductDetails"; //y.CampaignWave_Nm=y.WaveDetails?y.WaveDetails.Wave_Nm:""; y.ProductDetails.map((z: any) => { z.waveId = y.WaveId; products.push(z) z.type = "Product"; z.idName = ["type", "ProductName", "ProductId"]; z.labelName = "ProductName"; z.childName = "TemplateDetails"; z.TemplateDetails.map((p: any) => { p.type = "Template"; p.mainWaveId = (p.AssetDetails.length == 0) ? p.CampaignWaveId : p.AssetDetails[0].CampaignWaveId if (p.FormId) { p.TemplateName = p.FormName } p.idName = ["type", "TemplateName", "TemplateId"]; p.labelName = "TemplateName"; p.childName = "AssetDetails"; tempAssets = tempAssets.concat(p.AssetDetails) p.AssetDetails.map((o: any) => { o.mainItem = true o.type = "Asset" o.idName = ["type", "AssetFile_Nm", "AssetId"] o.labelName = "AssetFile_Nm" return o; }) return p; //tempAssets.push(y.campaignWaveAsset); }) return z; }) return y; }); return x; }); setCampaign(products) let temp = products.length > 0 ? products[0].TemplateDetails : [] debugger setTemplate(temp); // getFormsData() // setTemplate(tempAssets); // setAlllProducts(products); // setActiveProducts(products) // setAlllWaves(waves); // setActiveWaves(waves); // setAssets(tempAssets); } } ) }; const getFormsData = (waveId) => { console.log('hi') axios.get('//p360zingformsapi.azurewebsites.net/api/formslist/' + waveId).then((res) => { console.log(res.data) let d = res.data.map((x) => { x['File_Nm'] = x.formName + " Form"; x.waveId = '1000'; x.form = true; x.productId = '1000'; x.campaginId = '1000'; x.Template_Val = ''; x.Category_Cd = "FRM" return x; }) var groupBy = function (xs, key) { return xs.reduce(function (rv, x) { (rv[x[key]] = rv[x[key]] || []).push(x); return rv; }, {}); }; let temp = groupBy(d, 'formId') let data: any = []; for (let i in temp) { let o: any = temp[i][0]; o.questions = temp[i]; data.push(o); } console.log(data) // debugger setForms(d); // debugger }) } // const getTemplatesFromCampign=(activeCampaign:any)=>{ // axios.get(config.REACT_APP_CAMPAIGN_API_BASE+"/campaign/"+activeCampaign+"?Page="+page+"&PageSize="+pageSize,{headers:{"Authorization":"Bearer "+sessionStorage.getItem('login')}}).then((res)=>{ // //setAssets(res.data.data); // let tempAssets:any=[]; // console.log(res.data.data) // setCampaign(res.data.data) // res.data.data.map(x=>{ // x.refCampaignWaves.map((y:any)=>{ // tempAssets.push(y.campaignWaveTemplate); // return y; // }); // return x; // }) // setTemplateId(tempAssets[0].id) // setTemplateText(tempAssets[0].templateVal) // setTemplate(tempAssets); // }) // } const brandInputdisable = (name, phone, asso_pres) => { // console.log(assoPrescName === "" && othersPhone === "", assoPrescName, othersPhone) if (formType) { if (name && phone && asso_pres) { debugger setDisableBrandInput(false) } else { debugger setDisableBrandInput(true) } } else { setDisableBrandInput(false) } } const setPhoneNumber = (e) => { if (e) { setOthersPhone(e); brandInputdisable((assoPrescName.length > 0), (e.length > 0), (assoPrescName.length > 0)); } else { setOthersPhone(""); brandInputdisable((assoPrescName.length > 0), false, (assoPrescName.length > 0)); } // debugger } // const smsInputdisable = (name,phone,asso_pres,brand) =>{ // if(name && phone && asso_pres && brand){ // debugger // setDisableSmsInput(true) // } else { // debugger // setDisableSmsInput(false) // } // } const setOthersFromList = (x) => { setSelecteedOthers(x); setOthersName(x.AcctFull_Nm); //setOthersPhone(x.AcctPh_Nbr); setOthersDataHidden(true); if (x.Prescriber) { setPrescriber(x.Prescriber); } setOthersPhone(getNumberFromItem(x)); brandInputdisable(true, (x.AcctPh_Nbr.length > 0), true) } const reSetFormInputs = (e) => { setSelecteedOthers({}); // console.log(e) setFormType(e) // if(e === true){ // setOthersPhone(""); // setTemplateText("") // setAssoPrescName(""); // }else{ setTemplateId(0) setAssoPrescName(""); setAssoPresc({ Id: '' }); setHiddenPresList(true); setDisabled(true); setOthersPhone(""); setDisableBrandInput(true) // setTemplate([]); setTemplateText(""); setOthersName(""); setAssoPrescName(""); setAssets([]); setAssociated({}) // } } const selectbrand = (e) => { debugger setTemplate(e.TemplateDetails ? e.TemplateDetails : []) // setRefreshTemplate(true) setTemplateText(""); setTemplateId(0) setAssets([]); setIsForm(false) // getFormsData(1001) } return ( <div> {/* <Button onClick={handleOpen}>Open modal</Button> */} <Modal open={show} // onClose={handleCloseParent} closeAfterTransition BackdropComponent={Backdrop} BackdropProps={{ timeout: 500, }} className="new_chat_modal" > <Fade in={show}> <Box sx={style}> <div className="modal-header d-flex"> <h1 className="font-newchat">New Chat</h1> <span onClick={() => { handleCloseParent(); reSetFormInputs(true) }} className="close"> × </span> </div> <div className="modal-body new_chat_body"> <form onSubmit={(e) => e.preventDefault()}> <div className="selecttype-radio-btns"> <FormControl className="width100per"> <div className="newChatModalBody"> <FormLabel id="demo-customized-radios">{t('Select Type')}</FormLabel> <div className='headerright' > <label className="autopilot-switch font-sm me-3"> <input checked={isSMS} onChange={(e) => { setIsSms(e.target.checked) }} type=checkbox className="font-sm" id="msg-wtsappChechedId" /> <span id="msg-wtsapptoggle" className="b-slider b-round"></span> </label> </div> </div> <RadioGroup row defaultValue="prescriber" aria-labelledby="demo-customized-radios" name=customized-radios onClick={(e: any) => { e.target.value === "prescriber" ? reSetFormInputs(true) : reSetFormInputs(false); }} > <FormControlLabel value="prescriber" control={<BpRadio />} label="Prescriber" /> <FormControlLabel value="others" control={<BpRadio />} label="Others" /> </RadioGroup> </FormControl> </div> <div className="form-fields-div new-chat-prescriber"> {formType === true ? ( <AssociatedPresList clearDataOnSelect={false} placeholder={"Search for Prescriber"} label="Prescriber Name" styleClass="inputEnable" setAssoPresc={(e: any) => { setPrescriber(e); }} /> ) : ( <div className="NewChatModalOthersName"> <TextField className="roundborder inputEnable" onChange={(e) => { if (e.target.value.length == 0) { setSelecteedOthers({}) } setOthersName(e.target.value); }} value={othersName} label="Recipient Name" placeholder="Please enter the recipient name" color="secondary" focused /> <Paper hidden={othersDatahidden}> <div id="presList" > {othersData.length > 0 ? ( othersData.map((x: any) => <div key={x.Id} onClick={() => { setOthersFromList(x) }}>{x.AcctFull_Nm}</div>) ) : ( <div>No Result</div> )} </div> </Paper> {/* <div className="othesNameDiv" hidden={othersDatahidden}> <ul> { othersData.map((x:any)=>( <li key={x.Id} onClick={()=>{ setOthersFromList(x); }}>{x.AcctFull_Nm}</li> )) } </ul> </div> */} </div> )} <CountryDropdown errorFunc={(e) => { setDisabled(e); setPhoneError(e); if (e) brandInputdisable((assoPrescName.length > 0), false, (assoPrescName.length > 0)); }} disableColored={disableBrandInput} valueNumber={othersPhone} onChangeNumber={(e: any) => { setPhoneNumber(e) }} /> {formType === false ? ( <div className="asso-prescriber-div createContactAssociate"> <h1 className="font-md">Associated Prescriber</h1> { selectedOthers.Id ? <DropdownInupt disableColored={false} keepPlaceHolderAtStart={true} placeHolder="Select a Prescriber" label="" data={selectedOthers.Prescribers} id="" name=AcctFull_Nm func={(e) => { setAssoPrescName(e.AcctFull_Nm); setAssociated(e) }} /> : <div> <AssociatedPresList clearDataOnSelect={true} placeholder={"Search for an Associated Prescriber"} label="" styleClass="inputEnable" setAssoPresc={(e: any) => { brandInputdisable(true, true, true); setAssoPrescName(e.AcctFull_Nm); setAssociated(e) }} /> { optedOut ? <div> Recipient Opted Out </div> : null } </div> } </div> ) : null} <div> <DropdownInupt disableColored={disableBrandInput} keepPlaceHolderAtStart={false} placeHolder="Select a brand" label="Brand" data={campaign} id="" name=ProductName func={(e) => { selectbrand(e) }} /> </div> <div> <DropdownInupt //refreshData={refreshTemplate} label="SMS Template" data={template} keepPlaceHolderAtStart={true} placeHolder="Select a Template" name=TemplateName disableColored={disableBrandInput} func={(e) => { console.log(e) console.log(disabled, e.TemplateId == 0, optedOut) setIsForm(e.FormId !== null); setTemplateText(e.TemplateBody); setTemplateValue(e); setTemplateId(e.TemplateId); setAssets(e.AssetDetails ? e.AssetDetails : []); setSelectForm(e) setFormValues(e.FieldDetails) }} /> {/* {template.length} {templateText.length} */} {templateText.length > 0 ? <div className="newchat-floating-form" style={{ display: "block" }}> <textarea name=sms-textarea id="newchat_sms" value={templateText} /> <p> <em>Characters : {templateText.length}</em> </p> </div> : null} { isForm ? <div className="template_body_form"> <form ref={refForm}> { formsValues.map((x: any, i: any) => ( <> <p className="para">{x.FieldName}</p> <textarea name={x.FieldId} id={x.FieldId} ></textarea> </> )) } </form> </div> : null } { assets.length > 0 ? <div className="template_assets_form" > <ul> { assets.map((x: any) => ( <li> <a href={x.AssetFile_Url}>{x.AssetFile_Nm}</a> </li> )) } </ul> <label htmlFor="">Assets</label> </div> : null } </div> {/* <br /> */} <GenericButton label="Send" disable={disabled || templateId == 0 || optedOut} loading={loading} onClick={() => { sendMessage(); }} /> </div> </form> </div> </Box> </Fade> </Modal> </div> );}

 

web-brackets.com

Comments

Mohamed Atef Date : 2022-09-08

Best answers

52

Best answers

52

Hi Johann Alvares, 
The first thing to find the way to the error you have to explain what you need, you just published the code here with no description, then your code is not organized, and it's very hard for anyone to look at it and fix the problem, YOU NEED to make each part in components and use parameters & child components to pass / update the values of the states, then we can find way together. 
Good Luck

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

[solved] Expected a conditional expression and instead saw an assignment
Publish date: 2021-11-29 | Comments: 0

Tag: React js

useStyles Invalid hook call class component
Publish date: 2022-02-10 | Comments: 2

Tag: React js

React Component setState doesn't update my property
Publish date: 2022-03-29 | Comments: 2

Tag: React js

[solved] Render/Show a custom option in Autocomplete Material UI?
Publish date: 2021-12-22 | Comments: 2

Tag: React js

How to use Datepick of Mui with Formik
Publish date: 2022-02-14 | Comments: 7

Tag: React js