I have an array of languages, and I'm trying to push them into another array.
The array has objects, with keys added and language.
So in the other array I want to push just the object with key langauge
By far to do that I have loop through the array, and I push the values that has key language.
This feature is for the user to update, add or delete the language.
The language in key added is the language that the user has added when he created the account.
The new language that the user might add, it will be added in key language.
So the array looks like this:
language:
[
{added: "English"},
{language: "Italian"} // the new language added by the user
]
The loop: (Parent.js)
const [language, setLanguage] = useState([])
const [overAllLanguage, setOverAllLanguage] = useState([])
for (let lang in language) {
if (language[lang].language !== undefined) {
overAllLanguage.push({language: language[lang].language});
}
}
The result:
[
{id: '23f32'},
{language: 'I'},
{language: 'I'},
{language: 'It'},
{language: 'It'},
{language: 'Ital'},
{language: 'Ital'},
{language: 'Italia'},
{language: 'Italia'},
{language: 'Italian'},
{language: 'Italian'},
]
Excepted result:
[
{id: '23f32'},
{language: "Italian"} //the object I want to push
]
How the language is made from a child component: Child:
const handleAddClick = () => {
setLanguage([...language, { language: "" }]);
// setLanguage([...language, ""]);
if (language.length >= 1) {
setDisableAddButton(true);
}
};
const handleItemChanged = (event, index) => {
const value = event.target.value;
const list = [...language];
for (let item in language) {
if (typeof list[index] !== "string") {
list[index].added
? (list[index].added = value)
: (list[index].language = value);
} else {
list[index].language = value;
}
}
setLanguage(list);
};
The child with handle add generates the item on the array. The handleItemChanged can show the changes that the user is making on the input, if its changing the current language )(key:added) or if its adding a new language (key:language)
How can I solve this?