0
128
ViewsMy array doesn't return the same values if i select a nested object
Why does the result from these are not equal while they're the same exact array.
The array is passed down a component and is a react state.
const [vars, setVars] = useState([]);
<Message index={vars.findIndex((entry) => entry.NAME === "message")} vars={vars}/>;
I print my array using this within the Message component.
useEffect(() => {
console.log(vars[index], vars[index].CONTENT);
}, [index, vars]);
The value is OKAY in the vars[index] part, but if I do vars[index].CONTENT the content ain't right. What's the meaning of this, am I doing something wrong? If you need any other information, feel free to ask me.
EDIT: Here's the result I got from the console.log
1 answers
Answer question0
So, the following code works for me. I initialize vars with some made up state similar to what is being printed out.
import React, { useEffect, useState } from 'react';
const Message = ({vars, index}) => {
useEffect(() => {
console.log(vars[index], vars[index].CONTENT);
}, [index, vars]);
return(
<div>{vars[index].CONTENT.text}</div>
)
}
export const App = () => {
const [vars, setVars] = useState([
{
NAME: 'error',
CONTENT: {
text: "error text",
variant: "danger"
}
},
{
NAME: 'message',
CONTENT: {
text: "message text",
variant: "info"
}
},
]);
return(
<Message index={vars.findIndex((entry) => entry.NAME === "message")} vars={vars}/>
);
}
export default App;
Maybe this isn't the answer to your question but if you are still having an issue, maybe you could post the code where you are calling setVars, that is probably where the issue originates.
