How to convert Array of Object into Object in React - reactjs

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 }) )));

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.

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 .

How to merge/add variable in angular

Below is my user object. Once i submit form i am getting values for it along with priPhone , mobilePhone.
this.user = {
isActive: 1,
contactDetails: {
name: { }
},
};
}
mobilePhone:any={phoneNumber: '',type:'Mobile'};
primaryPhone:any={phoneNumber: '',type:'Primary'};
I have to set mobilePhone, primaryPhone details to User Object.
So that i want final object like this.
this.user = {
isActive: 1,
contactDetails: {
name: { }
},
phoneNumbers: [{
phoneNumber: '',
type: 'Primary'
}, {
phoneNumber: '',
type: 'Mobile'
}]
};
How to do it ?
This should work in javascript.
this.user.phoneNumbers = [];
this.user.phoneNumbers.push(mobilePhone);
this.user.phoneNumbers.push(primaryPhone);
or simply
this.user.phoneNumbers = [mobilePhone, primaryPhone];

Resources