How can I get data from useParam hooks? - reactjs

Question

I'm using react useParams hooks for get url params id. In component AppMessageItems i get id, but how i can send this data to getMessages function for send to endpoint. But when i try get params id in the getMessages function react give error about invalid using hooks
const AppMessageItems = ( {messages, getMessages} ) => {
let { id } = useParams();
console.log(id) // 123
useEffect( () => {
const setUserMessageDataToLocalStorage = localStorage.getItem('token');
getMessages(setUserMessageDataToLocalStorage)
}, []);
return (
<Container>
<TabPanelContainer>
<TabPanelHeader/>
<TabPanelBody />
<TabPanelFooter/>
</TabPanelContainer>
</Container>
)
};
const getMessages = (token) => async (dispatch) => {
// test data
const all = {
pass: 'Hello World',
};
try {
const getMessages = await axios.post(API.getUserMessages, {}, {headers: {"Authorization": 'Bearer ' + token}})
.then(res => res.data);
dispatch(getMessagesDispatch(all));
} catch (err) {
console.log("Error GET_MESSAGES");
}
};

Answer 1

As I commented. here's the walkthrough:
const AppMessageItems = ( {messages, getMessages} ) => {
let { id } = useParams();
const dispatch = useDispatch();
console.log(id) // 123
useEffect( () => {
const setUserMessageDataToLocalStorage = localStorage.getItem('token');
dispatch(getMessages(setUserMessageDataToLocalStorage, id))
}, [id, dispatch]);
return (
<Container>
<TabPanelContainer>
<TabPanelHeader/>
<TabPanelBody />
<TabPanelFooter/>
</TabPanelContainer>
</Container>
)
};
const getMessages = (token, id) => async (dispatch) => {
// use the id param whereever
// test data
const all = {
pass: 'Hello World',
};
try {
const {data} = await axios.post(API.getUserMessages, {}, {headers: {"Authorization": 'Bearer ' + token}})
dispatch(getMessagesDispatch(all));
} catch (err) {
console.log("Error GET_MESSAGES");
}
};