I am trying to update my component everytime the prop changes:
export default function ChatMessages(props) {
const [chatRooms, setChatRooms] = React.useState([]);
React.useEffect(() => {
(async () => {
var x = await GetMessages(props.statePassDown);
console.log(x);
setChatRooms(x);
})();
}, []);
return (
<div class="mainChatView">
<div>{props.statePassDown}</div>
{chatRooms.map((chatRoom, index) => {
return (
<ul>
<li key={index}>
<table>
<tr>
<td>
chatID: {chatRoom.chatID}
<br></br>
message: {chatRoom.message}
</td>
</tr>
</table>
</li>
</ul>
);
})}
</div>
);
}
But unfortunatley, this code is only ever called once. I can see that the prop changes through this div:
<div>{props.statePassDown}</div>
This line rerenderes everytime a button is pressed inside another component, but the whole mapping function isnt.
How can I alter my code that it responds to the change in props.statePassDown?
You're explicitly setting the effect to have no dependencies:
React.useEffect(()=>{
// ...
}, []); // <-- empty dependencies
That means it will only ever be executed on component mount. (If you don't pass any dependency array, then the effect is executed after each component update.)
Change the dependencies to have the effect be executed when those values change.
React.useEffect(()=>{
// ...
}, [props.statePassDown]);
export default function ChatMessages(props) {
const [chatRooms, setChatRooms] = React.useState([]);
React.useEffect(()=>{
(async () => {
var x = await GetMessages(props.statePassDown)
console.log(x)
setChatRooms(x)
})()
},[props.statePassDown]) // pass what you are trying to watch change
...
// ... here in the dependency array
Also, a good thing to note about the useEffect hook is that the return statement inside of a useEffect hook will trigger on the component did unmount lifecycle. ex.
useEffect(() => {
// ... on component mount
return () => {
// ... component did unmount
}
}, [/* dependency array */]);