score:1
you are trying to toggle active only which is used by all items. instead use index position to toggle.
i have explained the rest within the code using comments.
app.js
import react, { usestate } from "react";
import "./styles.css";
const list = [1, 2, 3];
export default function app() {
const [active, setactive] = usestate();
return (
<div>
{/* you forgot to add ul here */}
<ul>
{list.map((item, idx) => {
return (
// added key to each child to avoid error. use <react.fragment/> instead of <>
<react.fragment key={idx}>
<li
onclick={() => {
// condition for toggling the lists.
// if current list is selected
if (active === idx) {
// change active to blank
setactive();
} else {
// change active to current index
setactive(idx);
}
}}
>
{item}
</li>
<div classname={active === idx ? "info active" : "info"}>
{" "}
info {idx + 1}
</div>
</react.fragment>
);
})}
</ul>
</div>
);
}
edited this css to avoid applying to another tag style.css
.info.active {
display: flex;
}
you can try the above code on sandbox https://codesandbox.io/s/stackoverflow-qno-65730790-tmeyf
score:1
seems like a good use case for usereducer. it's a really useful tool to keep track of the states of multiple components. in your case you would need to track whether a given li is active (showing information) or not. here is how to do that with usereducer
along with a sanbdox
import react, { usestate } from "react";
import "./styles.css";
const list = [1, 2, 3];
const default_states = list.map((item) => object({ id: item, action: false }));
export default function app() {
const [li_states, dispatch] = react.usereducer((state, id) => {
return state.map((item) => {
if (item.id === id) return { id: item.id, active: !item.active };
else return item;
});
}, default_states);
return (
<div>
{list.map((item) => {
const cur = li_states.find((s) => s.id === item);
return (
<div key={item}>
<li
onclick={() => {
dispatch(item);
}}
>
{item}
</li>
<div classname={cur.active ? "action" : "info"}> info {item}</div>
</div>
);
})}
</div>
);
}
what's happening here is each time you click any of your lis, the dispatch
calls the reducer function inside react.usereducer
with the id of the li and toggles the state of the clicked li.
score:1
you can follow this method too
const list = ['start', 'installation', 'text banners', 'image banners'];
const links = ['/start', '/installation', '/textbanners', '/imagebanners'];
const [active, setactive] = usestate(null)
const toggleactive = (e) => {
console.log(e)
setactive(e.target.innertext)
}
return (
<div classname={style.dashboard_container}>
<div classname={style.dashboard}>
<ul>
{list.map((item, index) => {
return (
<li classname={active == item ? style.active : ''} key={index} onclick={toggleactive}>{item}</li>
)
})}
</ul>
</div>
{children}
</div>
);
Source: stackoverflow.com
Related Query
- make only the clicked item on a list active in react
- How can I make only one list item expand when a button is clicked in React (no hooks)?
- React List and Keys - How to make last added item appearing at the top?
- Targeting only the clicked item on a mapped component ( React quiz trivia App)
- React list, show active item onClick. Without re-rendering the list
- how to make only one list item expand when clicked- react hooks
- React hooks - OnClick show only the clicked item
- React Beautiful DnD- set the drag handle to be ONLY the list item MARKER
- drop down opens up on every Item I map through How can I make open up only on the one I clicked
- React JS how to remember the clicked item in a list when I pass to next page
- How to click a button into a list array items only effect the related item using React hooks
- how to make the selected item active in side bar in react js?
- React Redux -- can I make mapStateToProps only take in part of the state?
- How to avoid re-rendering the whole List instead of adding the new item to the DOM list in react JS?
- Why is only the last item in a map function being changed in react app?
- Change items in list in React when an item has been clicked
- How to change the color of a active button only in react native
- React renders the wrong data when deleting the item in the middle of the list
- React - Show only the clicked user
- React - How to change the text of accordion heading of the current clicked item
- How to stop re-rendering a whole list of items when only one item of the list is created or updated in ReactJs React-Redux?
- How to make the first item of the list always be at the top and the rest of the list will scroll independently of it
- Apply changes only to the clicked item among several items with same method name
- React setState only returning last item in a list saved to variable
- How do I access the index of a selected item in list using React and Material UI?
- react change the class of list item on click
- How to get index of the clicked images which is an item of array using React native
- how to revert (last clicked list item) back to its original color when any other item is clicked - react hooks
- How to make a tab active when it is clicked on in React
- how to change the style of only one react component that is being render through .map() when the component is clicked
More Query from same tag
- React-Router 1.0.0beta3 sub link not working properly
- Using withStyles with Typescript in the new @material-ui/core
- I want to SetState the items of a child component from the child component to the parent component
- show form in dynamic column when iterating
- Downloading From Amazon S3 Bucket with a file name
- React Router 5+ HashRouter Handle Browser Back button
- How to get data from Api first and then call the my function?
- Setting the values of an object in an array in React?
- Using Sockets.io with React.js + Hooks; sockets.emit Not Working
- How to add style to React Element if it's created this way?
- React Native firebase signInWithEmailAndPassword how to validate login
- How to automate firebase deploy in reactjs?
- Type an API response and render it conditionally
- Express direct to the wrong endpoint in production but work perfectly on development
- Reactjs map grid using Semantic-ui-react package
- React passing state value to parent
- how to make multiple api calls in one action (one button)
- How to get base64 out of react-dropzone plugin with redux-form library
- How to deal with backend dynamically allocated ports on react.js side using axios?
- How to pass props to child components in react-router tree
- multiple this.setState(this.state) not re-rendering page
- How to use same setstate method to set state of different variables to true / false using react?
- Reactjs: Inject a text into React-Select Input field
- Change state onClick React+Redux
- I want to create a function that return a tree from a array of objects
- Typescript overload/edit given types by 3rd library component in React.js
- Fetching json api using react ( useeffect )
- How to make a React Hooks who update data between pages
- how to change the email or password of user as admin in aws amplify for node.js
- Select one particular todo id after click