It's almost 3AM and i just don't understand how change API params for language_code, i want to change it in 'en' and 'ru', and maybe some others but even logic with to params doesn't work
I''m tried it with hooks and localStorage, but it's rerender all except API request
const [language, setLanguage] = React.useState('en')
const fetchData = React.useCallback(() => {
axios({
// other logic (there is key :) )
}, "params": {
"language_code": `${language}`
}
})
.then((response) => {
setResponseData(response.data)
})
.catch((error) => {
console.log(error)
})
}, [])
React.useEffect(() => {
fetchData()
}, [fetchData])
// here i'm fetch data
<button className='buttondata' type='button' onClick={fetchData}>Click for Data</button>
Maybe i'm just don't understand something with mounting or work with API
I'm made some strange solution, maybe it will need someone in the future. Just save state in localStorage and call it with useState through radio buttons and spread operator:
const saved = localStorage.getItem("language");
const initialValue = JSON.parse(saved) || 'en';
const [language, setLanguage] = React.useState(initialValue || 'en');
localStorage.setItem("language", JSON.stringify(language));
console.log(language)
const handleChange = (event) => {
setLanguage(event.target.value);
window.location.reload(true);
};
const controlProps = (item) => ({
checked: language === item,
onChange: handleChange,
value: item,
name: 'color-radio-button-demo',
inputProps: { 'aria-label': item },
});
There is controlProps function with Radio buttons:
<Radio {...controlProps('en')} />
<Radio {...controlProps('ru')} color="secondary" />
<Radio {...controlProps('de')} color="success" />
<Radio {...controlProps('fr')} color="default" />
<Radio
{...controlProps('ru')}
sx={{
color: pink[800],
'&.Mui-checked': {
color: pink[600],
},
}}
/>