Develop Reference

How to update an array inside an array of objects with useState function component

How to update array inside array use state function component
the array is inside the setTask() and how to use setTask() and add new_photo in photos
const new_photo = "testing2.png"; <------------ insert this value in photos
const [task, setTask] = useState([
{
task_id: 123,
title: "sample",
photos: ["testing1.png"] <------------ here
}
])
Result should be like this:
[
{
task_id: 123,
title: "sample",
photos: ["testing1.png","testing2.png"]
}
]

setTask((oldTasks) => {
const myTask = oldTasks.find(t => t.task_id === 123)
return [
...oldTasks.filter(ot => ot.task_id != 123),
{
...myTask,
photos: [...myTask.photos, new_photo],
}
]
})
Ref: spread operator and asynchronous state update

const new_photo = "testing2.png"; // <------------ insert this value in photos
const [task, setTask] = useState([
{
task_id: 123,
title: "sample",
photos: ["testing1.png"] // <------------ here
}
])
const arrayPush = (ID) => {
setTask((element) => {
element.forEach((e) => {
if (e.task_id === ID) {
e.photos.push(new_photo);
}
});
});
console.log(task);
}
const arrayPush2 = (ID) => {
let taskCopy = Array.from(task)
taskCopy.forEach((element) => {
if (element.task_id === ID) {
element.photos.push(new_photo);
}
});
setTask(taskCopy)
};
arrayPush(123)
arrayPush2(123)

ReactJS: How to update the data in array state

const [rowData, setRowData] = useState([]);
const old = {id: 'stud1', name: 'jake', room: '2'};
const newData = {name: 'jake', room: '3A'};
useEffect(() => {
let ignore = false;
(async function getUsers() {
let response = await getAll({ length: 999 });
if (!ignore) setRowData(response['data']['data']);
})()
return () => {
ignore = true;
}
}, []);
(async function updateItem() {
await update(oldData.id, newData).then(response => {
//value of response['data'] = {id: 'stud1', name: 'jake', room: '3A'}
setRowData(arr => [...arr, response['data']]);
}).catch(err => {
console.log(err);
})
})()
How to update the array list without appending a new data. cause I tried this setRowData(arr => [...arr, response['data']]); then it keeps appending a data.
Instead it will update the value in the array it will append on it.

Since you want to update one item within the state array, you can use map and update the item based on the id like below
(async function updateItem() {
await update(oldData.id, newData).then(response => {
setRowData(arr => arr.map(item => {
if (item.id === response.data.id) {
return response.data;
}
return item;
});
}).catch(err => {
console.log(err);
})
})()

I do not think you need a spread operator.. you can just use array.map().. maybe something like this will help you..
const old = [{id: 'stud1', name: 'jake', room: '2'},{id: 'stud2', name: 'jack', room: '2'}];
const newData = {id: 'stud1', name: 'jakey', room: '3A'};
const x = old.map((stud) => {
if(stud.id === newData.id){
stud = newData;
}
return stud;
});
console.log(x);
then you can use the x for setRowData(x)

Trying to access state in oncompleted method

I have API query and getting the result and setting those in a state variable in Oncompleted method of API query, Now i am updating the same state variable in another api query "onCompleted method.
I am not able to access the result from state what i have set before in first api query and below is my code
Query 1:
const designHubQueryOnCompleted = designHubProject => {
if (designHubProject) {
const {
name,
spaceTypes
} = designHubProject;
updateState(draft => { // setting state here
draft.projectName = name;
draft.spaceTypes = (spaceTypes || []).map(po => {
const obj = getTargetObject(po);
return {
id: po.id,
name: obj.name,
category: obj.librarySpaceTypeCategory?.name,
description: obj.description,
warning: null // trying to modify this variable result in another query
};
});
});
}
};
const { projectDataLoading, projectDataError } = useProjectDataQuery(
projectNumber,
DESIGNHUB_PROJECT_SPACE_TYPES_MIN,
({ designHubProjects }) => designHubQueryOnCompleted(designHubProjects[0])
);
Query 2:
const {
// data: designhubProjectSpaceTypeWarnings,
loading: designhubProjectSpaceTypeWarningsLoading,
error: designhubProjectSpaceTypeWarningsError
} = useQuery(DESIGNHUB_PROJECT_LINKED_SPACETYPE_WARNINGS, {
variables: {
where: {
projectNumber: { eq: projectNumber }
}
},
onCompleted: data => {
const projectSpaceTypeWarnings = data.designHubProjectLinkedSpaceTypeWarnings[0];
const warnings = projectSpaceTypeWarnings.spaceTypeWarnings.reduce((acc, item) => {
const spaceTypeIdWithWarningState = {
spaceTypeId: item.spaceTypeProjectObjectId,
isInWarningState: item.isInWarningState
};
acc.push(spaceTypeIdWithWarningState);
return acc;
}, []);
console.log(state.spaceTypes); // trying to access the state here but getting empty array
if (state.spaceTypes.length > 0) {
const updatedSpaceTypes = state.spaceTypes;
updatedSpaceTypes.forEach(item => {
const spaceTypeWarning = { ...item };
spaceTypeWarning.warning = warnings?.filter(
w => w.spaceTypeId === spaceTypeWarning.id
).isInWarningState;
return spaceTypeWarning;
});
updateState(draft => {
draft.spaceTypes = updatedSpaceTypes;
});
}
}
});
Could any one please let me know where I am doing wrong with above code Or any other approach to modify the state, Many thanks in advance!!

Pre and post hooks for factory - scope issue

I'm attempting to build a simple factory that will pass "props" to modifiers registered to the parent.
However, in the code below, the props object is undefined by the time posthooks() gets called.
const factory = function({ collection = [], modifiers = [] }) {
let props = { collection, timesRan: 0 };
const registerRun = () => {
props.timesRan = props.timesRan + 1;
}
const prehooks = function() {
modifiers.forEach((modifier) => {
modifier.prehook(props);
registerRun();
});
};
const posthooks = function(props) {
modifiers.forEach((modifier) => {
modifier.posthook(props);
registerRun();
});
};
prehooks();
posthooks();
return props;
};
// test case
const collection = [
{
"name": "Jimmy",
"id": 1
},
{
"name": "Johnny",
"id": 2
},
]
// modifier
const modifier = {
prehook: (props) => {
if (props && props.collection) {
console.log('pre hook ran');
props.collection = props.collection.map(item => Object.assign({}, { points: 100 }, item));
}
return props;
},
posthook: (props) => {
if (props && props.collection) {
console.log('post hook ran');
props.collection = props.collection.map(item => Object.assign({}, { id: String(item.id) }, item));
}
return props;
}
}
// test the factory
const modifiers = [ modifier ];
const returnValue = factory({ collection, modifiers } );
console.log('returnValue', returnValue);

React: .map is not a function

So I am fairly new to react and most of my learning have been by watching tutorial, So at this point, I diverted from my instructor and started implementing it using my own understanding and then I was thrown with following error
React: .map is not a function
Here is the code
render() {
let person = null;
if (this.state.showPerson) {
person= (
<div>
{
this.state.person.map((el, index) => {
return <Person
key={el.id}
click={this.deletePersonHandler.bind(index)}
name={el.name}
age={el.age}
changed={(event) => this.eventSwitchHandler(event, el.id)} />
})
}
</div>
);
}
return (
The error occured after I implement eventSwitchHandler, Here is my switch handler code
eventSwitchHandler = (event, id) => {
const personInput = this.state.person.find(checkID);
function checkID (passedID) {
return passedID.id === id
}
console.log("newP")
const newP = {...personInput}
console.log(newP)
newP.name = event.target.value
console.log(personInput)
this.setState ({person: newP})
}
[Updated] Here is State
state = {
person: [
{id: "name1n", name: "Rohit", age: 24},
{id: "name2l", name: "Hariom", age: 23},
{id: "name3g", name: "Vaibhav", age: 58}
],
someOtherState: "Untouched state",
showPerson: false
}
[Update] Here is my instructor code, His name change handler is equal to my eventSwitchHandler
Again, My first question would be why does .map is not a function error occurs and while console.logging stuff, I observed something which is kinda rare to me for which I have attached a screenshot (why does the name appear to be different in both the places?)

Your person appears to be a javascript object and not an array which is what provides the map function.
You can check out the rest of the details in the docs here:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

To iterate the Object by .map method, utilizing the Object.keys() which returns an array of a given object's keys:
Object.keys(this.state.person).map((key, index) => {
console.log(this.state.person[key]);
})
Update
You have done different things to your instructor code:
eventSwitchHandler = (event, id) => {
const personInput = this.state.person.find(checkID);
function checkID (passedID) {
return passedID.id === id
}
const newP = {...personInput} // **** newP is an object. ****
newP.name = event.target.value
// What you missed:
// let person = this.state.person;
// person[personInput] = newP;
// this.setState ({person: person});
this.setState ({person: newP}) // **** now person becomes object, not an array any more. ****
}

You are not updating the state correctly in eventSwitchHandler
eventSwitchHandler = (event, id) => {
const personInput = this.state.person.find(checkID);
function checkID (passedID) {
return passedID.id === id
}
console.log("newP")
const newP = {...personInput} // newP is an object here
console.log(newP)
newP.name = event.target.value
console.log(personInput)
this.setState ({person: newP}) // overwriting person array with object
}
You would change that to
eventSwitchHandler = (event, id) => {
const personInputIndex = this.state.person.findIndex(checkID);
function checkID (passedID) {
return passedID.id === id
}
const newName = event.target.value
this.setState (prevState => ({
person: [
...prevState.person.slice(0, personInputIndex),
{...prevState.person[personInputIndex], name: newName},
...prevState.person.slice(personInputIndex)
]
})
)
}
or
eventSwitchHandler = (event, id) => {
const personInputIndex = this.state.person.findIndex(checkID);
function checkID (passedID) {
return passedID.id === id
}
const newName = event.target.value
this.setState (prevState => ({
person: Object.assign([], prevState.person, {
[personInputIndex]: {...prevState.person[personInputIndex], newName
}})
})
)
}

eventSwitchHandler = (event, id) => {
const personInput = this.state.person.findIndex(checkID);
function checkID (passedID) {
return passedID.id === id;
}
const person = {...this.state.person[personInput]};
person.name = e.target.value;
const newPerson =[...this.state.person];
newPerson[personInput] = person;
this.setState ({person: newPerson})
}