Const InitialValue Updating on updating thirdPartyRequestVar - reactjs

TextChangeHandler function I am trying to update thirdPartyRequestVar with respect to index and properties, but updating the thirdPartyRequestVar the initialValue are also getting updated
Const initialValue: RequestThirdParty = {
businessName: '',
businessErrorText: '',
addressLine1: '',
addressLine1ErrorText: '',
addressLine2: '',
addressLine2ErrorText: '',
addressLine3: '',
addressLine3ErrorText: '',
city: '',
cityErrorText: '',
state: 0,
stateErrorText: '',
zip: '',
zipErrorText: '',
country: 0,
countryErrorText: '',
leaseOrLoan: 0,
leaseNumber: '',
leaseNumberErrorText: '',
};
const originaThirdPartyRequestVar = [{ ...initialValue }];
export const thirdPartyRequestVar = makeVar<RequestThirdParty[]>(originaThirdPartyRequestVar);
export const onTextChangeHandler = (
index: number,
validationMessage: string,
value: string,
propertyName: string,
validationPropertyName: string,
) => {
const thirdPartyNewRequest = thirdPartyRequestVar();
thirdPartyNewRequest[index][propertyName] = value;
thirdPartyNewRequest[index][validationPropertyName] = validationMessage;
thirdPartyRequestVar([...thirdPartyNewRequest]);
};
Any idea what I am doing wrong here and how can I avoid updating const InitialValue on updating thirdPartyRequestVar

Related

React Hook useEffect has missing dependencies Either include them or remove the dependency array react-hooks/exhaustive-deps

I have this alert on console:
React Hook useEffect has missing dependencies: 'clearClient', 'clearProductEdit', 'clearProducts', 'client', 'productEdit', and 'rows'. Either include them or remove the dependency array react-hooks/exhaustive-deps
clearClient,ClearProducts and clearProductsEdit are similar functions, which return the initial value of my reducer
The function is working normally, however I would like to resolve this alert, am I using useEffect incorrectly? How can I solve this?
My useEffect:
useEffect(() => {
return () => {
clearClient(client)
clearProducts(rows)
clearProductEdit(productEdit)
}
}, [])
My clearClient function:
function clearClient(c) {
dispatch({
type: 'CLEAR_CLIENT',
payload: { row: c },
})
}
On my reducer,the initialState is:
const initialState = {
client: {
name: '',
id: '',
dateBirth: '',
cpf: '',
address: {
street: '',
number: '',
district: '',
city: '',
cep: '',
uf: '',
complement:'',
phone: '',
},
},
}
And the case of CLEAR_CLIENT:
case 'CLEAR_CLIENT':
return {
...state,
client: {
name: '',
id: '',
dateBirth: '',
cpf: '',
address: {
street: '',
number: '',
district: '',
city: '',
cep: '',
uf: '',
complement:'',
phone: '',
},
},
}
I recommend you to use the store variable outside the React component, like this
useEffect(() => {
return () => {
store.dispatch({
type: 'CLEAR_CLIENT'
})
store.dispatch({
type: 'CLEAR_PRODUCTS'
})
store.dispatch({
type: 'CLEAR_PRODUCTS_EDIT'
})
}
}, [])
As you are cleaning the store, you don't need to send payload, feel free to change the type namings to the ones you use on your code.

react hook forms - disappearing default values

I have been having some problems with react-hook-form and disappearing defaultValues
So I initiate the useForm with default values, and then get async user location from our API. I want to pre-fill the country based on our user data.
unfortunatelly, after I do that, loose all default values inside payment prop.
why is that happening and how can I fix it?
I tried to find some solutions but none seem to help me (setTimeout, useMemo on defaultValues etc)
const form = useForm<CheckoutFormSteps>({
defaultValues: {
team: {
id: null,
icon: 'url',
name: 'someName',
},
payment: {
address1: '',
address2: '',
city: '',
companyName: '',
paymentMethod: PaymentMethod.CreditCard,
country: '',
firstName: '',
lastName: '',
phone: '',
postalCode: '',
state: '',
vat_number: '',
},
},
});
useEffect(() => {
// some async logic to get user's country
form.setValue('payment.country', 'US');
// also tried setTimeout(() => form.setValue('payment.country', 'AU'));
}, []);
then the getValues look like
{
team: {
id: null,
icon: 'url',
name: 'someName',
},
payment: {
country: 'US',
} // all other payment props are gone
}
Here you go with a solution
const form = useForm<CheckoutFormSteps>({
defaultValues: {
team: {
id: null,
icon: 'url',
name: 'someName',
},
payment: {
address1: '',
address2: '',
city: '',
companyName: '',
paymentMethod: PaymentMethod.CreditCard,
country: '',
firstName: '',
lastName: '',
phone: '',
postalCode: '',
state: '',
vat_number: '',
},
},
});
useEffect(() => {
// some async logic to get user's country
form.setValue({
...form,
payment: {
...form.payment,
country: "US"
}
});
// also tried setTimeout(() => form.setValue('payment.country', 'AU'));
}, []);
Whenever you are setting the value, you need to retain the old value as value. For the same reason please use spread operator.

How to convert Array of Object into Object in React

GetQuery
sample data from getquery graphql generated api
{
id: '',
name: '',
regions: [
{
id: '',
name: '',
districts: [
{
id: '',
name: '',
locations: [{ id: '', city: '', division: '', street: '' }],
},
],
},
],
}
convert it to
{
id: '',
name: '',
regions: {
id: '',
name: '',
districts: {
id: '',
name: '',
locations: { id: '', city: '', division: '', street: '' },
},
},
}
I already tried to convert it by using this code
const data = dataGetOrganization?.AllCountries
const result = Object.keys(data).reduce((acc, key) => {
acc[key] = {
...data[key],
_styles: {
root: { overflow: 'hidden' },
},
}
return acc
})
Try something like this:
var newObj = Object.assign({}, ...(array.map(item => ({ [item.key]: item.value }) )));

Update an objects in state ReactJS

I am trying to update the state in react app
state = {
pickupAddress: {
country: '',
city: '',
zipCode: '',
street: '',
},
deliveryAddress: {
country: '',
city: '',
zipCode: '',
street: '',
},
parcel: {
type: '',
height: '',
width: '',
length: '',
weight: '',
quantity: '',
},
};
The problem that i am facing is i cannot reach inside of the object with e.target.pickupAddress.city for example.
This is my onChange method
onChange = (e) => this.setState({[
e.target.pickupAddress.country]: e.target.pickupAddress.country
});

How to add new object into existing state using react and redux saga

I have an object with information like this.
export const initialSettings = {
id: '01',
name: '',
lat: '',
long: '',
adressLine1: '',
adressLine2: '',
city: '',
state: '',
country: '',
zipcode: '',
status: '',
lastCommunicateDateTime: '',
{
PatientID: '1',
FirstName: 'Manav',
LastName: 'Pandya',
DateOfBirth: '',
MobileNo: '',
orders: [
{
orderId: '01',
pickupCode: 'XYZ456',
totalAmount: 40.0,
taxPercentage: 3,
insuranceAmount: 20.0,
totalCoPayAmount: 40.0,
totalPaidAmount: 40.0,
totalDueAmount: '',
paymentDueDate: '',
items: [
{
itemId: '01',
image: 'https://via.placeholder.com/30',
}
]
}
]
},
{
PatientID: '2',
FirstName: 'Manav',
LastName: 'Pandya',
DateOfBirth: '',
MobileNo: '',
orders: [
{
orderId: '01',
pickupCode: 'XYZ456',
totalAmount: 40.0,
taxPercentage: 3,
insuranceAmount: 20.0,
totalCoPayAmount: 40.0,
totalPaidAmount: 40.0,
totalDueAmount: '',
paymentDueDate: '',
items: [
{
itemId: '01',
image: 'https://via.placeholder.com/30',
}
]
}
]
}
]
};
But when I'm trying to add a new item using a reducer, then the old state was removed and won't get the proper state
Whenever I post my form with the different details than previous objects are removed and the new object added inappropriately
My reducer for the request looks like this.
case 'add':
return Map({
state: {
...state, // old object should remains same
patients: [state.patients, action.payload] // new item
}
});
It should be like this in reducer:
case 'add':
return {
...state, // old object should remains same
patients: [state.patients, action.payload] // new item
};
You should add reducer ;
case 'add':
return {
...state,
error: false,
loading: false,
data: state.data.concat(action.data), }
after that you need selector to send your data from selector to state ;
export const getDataDetail = state => getDataDetail(state)?.data;
last option is you should call your updated data . You should use
componentWillRecieve(nextProps) {
...... use your data match with nextProps and props
if(nextData && nextData !== this.props.yourData) {
this.setState({ data : nextData }) }}
it should be like that .

Resources