I have come across some strange behaviour in a component I am making.
I have some inputs that I map out and a onchange which passes the value to the parent component. I then add this data to an array depending on what data is sent.
I have setArray which is my state but it doesn't appear to get set?
const [array, setArray]= useState([])
function onChange(e, __typename, valid, value){
console.log(e, __typename, valid, value) // this returns mobile 01882828 true 0 if i am in the mobile input
const newSelectedArray = array;
if(array.includes(__typename)){
newSelectedArray.push({
...value,
__typename: __typename,
data: e,
isValid: valid
});
setArray(newSelectedArray)
}else{
array[value] = {
...value,
__typename: __typename,
data: e,
isValid: valid
}
setArray(array)
}
//console.log(array) this works and logs my array
}
useEffect(() => {
console.log(array); //this does not log my array
}, [array])
My return
...
<OnboardingContent sections={sections} sendToRegister={onChange}/>
<button onClick={() => console.log(array)}>Log</button> //This logs the array as well
<button onClick={() => setArray(array)}>State</button> //This does nothing
...
example console.log output
[
{
"__typename": "mobile",
"data": "01882828",
"isValid": true
},
{
"__typename": "firstname",
"data": "Hello",
"isValid": false
}
]
If someone could tell me why none of this is working