There are four buttons. You can currently move the link with one click. However, you need to double-click the button to activate the color of the button.
I want to activate the link and button with a click. Would it be possible to get some help?
Sidebar.js
const [selectBtn, setSelectBtn] = useState();
{SETTING_BAR_ICON.map(data => {
return (
<SidebarIcon
key={data.id}
src={data.img}
select={data.select}
link={data.link}
handleChangeBtnColor={() =>
setSelectBtn(data.id)}
isSelectBtn={selectBtn === data.id}
/>
);
})}
SidebarIcon.js
<SidebarIconContainer>
{isSelectBtn ? (
<ImgBackground>
<ImgSelect src={select} />
<ImgText>{link}</ImgText>
</ImgBackground>
) : (
<Link to={`/${link}`}>
<ImgFormat src={src} onClick=.
{handleChangeBtnColor} />
</Link>
)}
</SidebarIconContainer>
First issue you never close the function curly bracket in the handleChangeBtnColor property of the SidebarIcon. You need a } before the />. You also need the two methods inside to be wrapped in curly brackets. When you use arrow functions use curly brackets all the time, lie this:
const doSomething = () => {
...
}
Unless you only have one thing to return inside then you can leave out the curly bracket like this:
// shorthand
const doSomething = () => doAThing()
const getSomething = () => 'thing'
// same as this
const doSomething = () => {
return doAThing()
}
const getSomething = () => {
return 'thing'
}
// if you go to the next line you should use parenthesis
const doSomething = () => (
doAThing()
)
But I don't think that will fix it. Rather than use a Link tag, use the useNavigation hook and change the path in the handleChange... function. So something like this:
import { useNavigate } from 'react-router-dom'
const navigate = useNavigate()
return (
<SidebarIcon
...
handleChangeBtnColor={(link) => {
setSelectBtn(data.id)
isSelectBtn={selectBtn === data.id}
navigate(`/${link}`)
}}
/>
)
<DivStyledLikeYourOtherLinks onClick={() => handleChangeBtnColor(link)} />