score:1
this is happening because you are using wrong logic and you don't specify which submenu should be shown. first, delete the current state and dont use it. then, you should define another state like:
const [selectedmenu, setselectedmenu] = usestate("");
then, define this function:
const handleclick = (title) => {
setselectedmenu(title);
}
after that, once you click on box, you should invoke function like this:
onclick={() => handleclick(item.title)}
consequently, you should write your logic like this:
<text>{items.title}</text>
{item.title === selectedmenu
? items.submenu?.map((item) => {
return <text>{item.title}</text>;
})
: ""}
score:1
i think the problem is occurring because you have only 1 state variable set for every sidebar option. every sidebar option should have its own variable keeping track of whether its submenu should open or not.
in your code, when the isopen state variable is set to true then when the function maps over all the options the variable's value will always be true.
try setting a variable for each of the menu options which contains whether the submenu should open or not.
score:3
you have to use an array state variable. your single state variable isopen
is dictating all the submenus here:
{isopen
? items.submenu?.map((item) => {
return <text>{item.title}</text>;
})
: ""}
you need to have an array state variable here, so each sidebar item has a corresponding boolean
to dictate opening/closing of value.
const [isopen, setisopen] = usestate(array(sidebaritems.length).fill(false));
now you have to ensure that you are setting it correctly and manipulating the right array element.
onclick={() => {
let newisopen = [...isopen];
newisopen[index] = !isopen[index];
setisopen(newisopen);
}}
i hope this helps you reach your solution
Source: stackoverflow.com
Related Query
- Map function is not working properly when I hit onClick
- React Hooks state not working properly when the function calling it is called in another function
- map function not working properly in object React
- OnClick event not working in map function react
- map function in javascript not working properly for React components
- Map function is not working when try to fetch data inside react-simple-tree-menu
- onclick function is not working in react native application
- map function not working in React
- React onClick event not firing when function is passed to child
- Lodash 'get' not working when use in a Arrow Function (React)
- state.get is not a function when trying to map the react-redux State
- useState not rerendering when update function is called inside onClick function
- onClick event not passing a function when placed in a forEach loop in ReactJS
- useState hook's set State function not working properly with socket.io
- OnClick not working when rendering React button on a custom dialog
- React.js and Mapbox: mapbox map not rendering properly when using react.js
- adding key to map function is not working
- React - onClick function not working inside a flexbox
- map is not a function when updating state
- onClick handler to call Material UI dialog box, is not working properly
- React Js Map function not working on a nested array
- Ant design Form validation is not working and not updating input values when component is from a state that is passed from a function
- OnClick function not working with custom button Component
- React map function not assinging keys properly
- Map not a function error when i'm trying to pass props to a child
- Map function not working while passing props into React component (TypeScript, React and Next.js)
- onClick on "a" tag not working properly if it has some child elements in react
- React transition group is not working when using a function to out components
- props are not working when using map method in react.js
- async/await + try/catch not working as spected when using a .then() function
More Query from same tag
- Find an update object from an array in react using useContext
- How to hide variables in package.json
- How to add a error/validation message inside the renderer in react hook
- How to use dynamic meta tags in react single page application?
- Express server serves my static files but does not handle requests to my API. What is happening?
- "Module parse failed: Unexpected character '@'" when using lit component with NextJS
- cannot create a new react project using create-react-app
- React and wrappers for plotly.js charting
- Make multiple pages in ReactJS without using react-dom-router
- React hook useRef not working with styled-components and typescript
- Lumen API CORS Ajax 405 Method Not Allowed
- How to add if else inside the Tabs in react bootstrap
- How to generate ny video Thumnail?
- React-router issue when refreshing URLs with SSL Enabled
- How can I disappear "button" element in react?
- How to solve API fetch and type error in React
- Issue showing modal with react hooks on bootstrap 5
- Todo fetcher and Filter
- re-render single child component based on global state change without re-rendering siblings
- React Text Annotation
- How can I put Javascript code into a component of React?
- get data from dropdown for dynamic call api
- Getting user data from Firestore and saving it to state - React
- React redirect unit test not rendering expected dom
- redux connecting old states
- How do I correctly use 'styled-components'?
- spread style in react with css styles
- Cannot GET / error running hello world in webpack
- Emotion - pass style object to external library
- Login and authentication for route (react or server side)