Im using React, useState and React-Icons.
My intention is to create a dropdown menu (without Bootstrap). I want to change the icon when clicked (to init the function) but the output is the raw SVG details. Any ideas?
import { IoMdArrowDropdownCircle, IoMdArrowDropupCircle } from "react-icons/io";
function navBar() {
const navToggle = () => {
const [navMenuToggle, changeNavToggle] = useState(true);
return navMenuToggle ? (
<IoMdArrowDropdownCircle />
) : (
<IoMdArrowDropupCircle />
);
changeNavToggle(false);
};
return (
<>
<div className="tableIcon" id="navDropdown" onClick={navToggle}>
<IoMdArrowDropdownCircle />
</div>
</>
);
}
export default navBar;
You should never use react hooks inside a function , they should always be in the react component before the return .
I'd suggest the easiest way to render a component conditionally like this :
export default function RenderComponent() {
const [show, setShow] = React.useState(false);
return show ? <ComponentOne /> : <ComponentTwo />;
}
Or this way :
export default function RenderComponent() {
const [show, setShow] = React.useState(false);
const render = () => {
return show ? <ComponentOne /> : <ComponentTwo />
}
return render() ;
}
I managed to solve this issue by making a clickhandler function to change the state and a function to return the icon.
<div className="tableIcon" id="navDropdown" onClick={navToggle}>
{createIcon()}
</div>
functions
const [navMenuToggle, changeNavToggle] = useState("true");
const navToggle = () => {
if (navMenuToggle == "true") {
changeNavToggle("false");
document.getElementById("menuDD").style.visibility = "visible";
} else {
changeNavToggle("true");
document.getElementById("menuDD").style.visibility = "hidden";
}
};
const createIcon = () => {
if (navMenuToggle == "true") {
return <IoMdArrowDropdownCircle />;
} else {
return <IoMdArrowDropupCircle />;
}
};