We Keep Coding

why my lodash cloneDeepWith method only run once?

I have a very very very deep nested object state.
and i want to change all id properties at once with lodash cloneDeepWith methods.
i'm using cloneDeepWith and only works on first match.
if i dont return the modified object then it won't modifiy anything.
and if i return the value i think the function stops.
the function its working ok but the only problem is that only will run once.
const handleChangeIds = (value) => {
if (value === sections) {
const modifiedObject = cloneDeepWith(value, (sectionsValue) => {
if (sectionsValue && Object.hasOwn(sectionsValue, 'id')) {
const clonedObj = cloneDeep(sectionsValue);
clonedObj.id = generateObjectId();
return clonedObj;
// I Also Tried sectionsValue = clonedObj; its the same behavior
}
});
return modifiedObject;
}
};
const DuplicateSection = () => {
console.log('Original Store', form);
const store = cloneDeepWith(form, handleChangeIds);
console.log('Modified', store)
};

For those who want to achieve same thing like me.
I had a super deep nested object for form. and that form had a repeatable functionality.
and i needed to do two thing in generating another form.
generate new Id for every field Id.
clear the input Value.
I solved my problem like this
and it works perfectly for a super deep nested object.
import cloneDeepWith from 'lodash/cloneDeepWith';
const clearInputAndChangeId = (sections: FormSectionProps): FormSectionProps => {
return cloneDeepWith(sections, (value, propertyName, object) => {
if (propertyName === 'id') return generateObjectId();
if (propertyName === 'selected') return false;
if (propertyName === 'checked') return false;
if (propertyName === 'value') {
if (object.type === 'file') return [];
if (object.type === 'checkbox/rating') return 1;
return '';
}
});
};

Getting error on TypeError: Cannot read property 'push' of undefined

I'm getting this error. Kindly note splits is an array with values.
TypeError: Cannot read property 'push' of undefined
on
var products = splits.reduce((accu, curr) => {
if (accu[curr[0]] === null) {
accu[curr[0]] = [];
}
accu[curr[0]].push(curr[1]);
return accu;
}, {});
var result = Object.keys(products).map(key => `${key} - ${products[key].join(', ')}.`).join(' ');
Appreciate anyone helps to fix the above code

null === undefined is false in Javascript.
console.log(null === undefined);
So the condition accu[curr[0]] === null will return false though the accu[curr[0]] is undefined. Instead you could use the negation (!) to check if the variable is defined
console.log(!null);
console.log(!undefined);
Try the following
let products = splits.reduce((accu, curr) => {
if (!accu[curr[0]]) {
accu[curr[0]] = [];
}
accu[curr[0]].push(curr[1]);
return accu;
}, {});

React: TypeError: Cannot read property 'newValue' of undefined

I have the following in componentDidMount
componentDidMount() {
const company = this.props.location.state.company;
const financials = this.props.location.state.financials;
let { values } = this.state;
values = EDITABLES.map((data) => { //EDITABLES is a const imported array
return {
id: data.id,
name: data.name,
value: financials[data.id]
newValue: "",
};
});
this.setState({
values,
});
}
However, if I console.log the values at the time of render, the first console log shows it as undefined, but the next one shows it as defined. I am also able to map the values in my render method without any problem.
render() {
const {
company,
financials,
values,
} = this.state;
console.log(values, "check")
My problem is that in my render method, I call a function {this.calculate(financial.id)}
calculate(financial) {
const { financials, values } = this.state;
console.log(values, "values");
let numerator;
if (financial === "tev_profit") { //this line is okay
let tev = values.find(o => o.id === "total_value");
console.log(tev, "here");
numerator = tev.newValue; //this line is causing error.
From the console log it seems as if tev is sometimes defined but other times not. I'm not sure where I'm going wrong because I also added this to my code but still facing the same typeError:
this.calculate = this.calculate.bind(this);
Update:
I have tried adding if(values) to my calculate function before I go into any other if block, but getting the same error

Issue
Array.prototype.find can return undefined if element isn't found.
The find() method returns the value of the first element in the
provided array that satisfies the provided testing function. If no
values satisfy the testing function, undefined is returned.
Solution
Check for valid tev object before accessing properties
if (financial === "tev_over_ltm_gross_profit") {
const tev = values.find(o => o.id === "total_enterprise_value");
if (tev) {
// tev exists
numerator = tev.newValue;
}

How can I fix this problem with TypeError

I have typescript code. When click some button there must be working some func. That bounded with componentwillmount.
componentWillMount() {
const { species } = this.props;
const selectedSpecies =
species.find(v => v.id == SPECIES_TYPE_CATTLE) || null;
if (selectedSpecies) {
this.onSpeciesSelect(selectedSpecies);
}
}
TypeError: undefined is not an object(evaluating 'species.find')

You should check for species before doing .find.
const selectedSpecies = species ? species.find(v => v.id == SPECIES_TYPE_CATTLE) : null;

selectedSpecies is probably result of an async action and its value is not available at the time that componentDidMount is doing its job. So it should have a default value or be checked before that has a value

typeerror Cannot read property 'split' of undefined

I keep getting this error over this very basic code.
// utils/validateEmails.js
const re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
export default (emails) => {
const invalidEmails = emails.split(',')
.map(email => email.trim())
.filter(email => re.test(email) === false);
if(invalidEmails.length) {
return `These emails are invalid: ${invalidEmails}`;
}
return;
};
Used like
import validateEmails from '../../utils/validateEmails'
// snip
errors.emails = validateEmails(values.emails)

you would have to assign a value to the variable emails..
emails = 'e#a.com,c#r.com,e#e.com';
split is a property of the object string.. object properties are not available if an object is undefined.