score:3
Accepted answer
you need a way to identify which element has been clicked.
here's an example:
export default class app extends react.component {
state = {
opened: true,
selected: ''
};
togglehidden = key => {
this.setstate({ opened: !this.state.opened, selected: key });
};
render() {
return (
<div>
{arr.map((s, i) => (
<div key={i}>
<p>{s}</p>
<button onclick={() => this.togglehidden(i)}>toggle</button>
{!this.state.opened && this.state.selected === i && <h1>{s}</h1>}
</div>
))}
</div>
);
}
}
Source: stackoverflow.com
Related Query
- onClick event on an array element javascript React
- Get object data and target element from onClick event in react js
- Add onClick event to a group element (svg) with react
- Replace element in array with in one line using spread operator in javascript react
- Event object from onClick event couldn't access one of the props on the element in react
- How could I stop execution of onClick event for a specific element in React
- Remove element from array with onClick and react
- How can I add onClick event for Ref Element using React Hooks?
- How to find out if element in react have onClick event using dom
- How to adjust the onClick event of react.children when child is a react component not a DOM element
- How to find child element in React using onClick event
- Javascript class instance method does not work with onClick callback event in react
- React onClick event triggered clicking the child element
- React - on OnClick display next element in array
- Delete specific element in the array in localstorage using javascript and React
- React event target value from jsx element does not get bind to state and json array (Type error cannot read the properties of undefined )
- How can I change background colors to the react element upon onclick event
- React onClick event firing for child element
- How can I add a click event on an individual Element in a mapped array in react
- ReactJS onClick event on an array element
- React onClick - pass event with parameter
- React JS onClick event handler
- How to use onClick event on react Link component?
- React passing parameter via onclick event using ES6 syntax
- React onClick event on component
- React - how to capture only parent's onClick event and not children
- Simulate click event on react element
- React - ul with onBlur event is preventing onClick from firing on li
- React onClick event
- Why does a react onClick event append a question mark to my url?
More Query from same tag
- How to import an svg sprite file in gatsby
- How to convert MongoDB Buffer to Image in React/Node/Express
- SetState error when user login returns errors
- How to run a function with default "id" on start using useEffect hook in react?
- Export a function from another js file in React
- React Fetch API quote random generator
- ReactJs MaterialUi onRowUpdate field validation
- How to check the response from global fetch in JEST test case
- React.js: Difference between passing in the subcomponents with React.render() and with React.createClass()'s render?
- React Props not displaying data on UI
- React Failed to compile. Module not found: Can't resolve 'Main.css'
- My CSS is not working properly in vs code
- How do I make my functions specific to individual objects in an array, rather than globally effecting them all?
- Tailwindcss - How to add top/bottom/right/left in group-hover utilities
- express' response.sendFile() sends Uncaught SyntaxError: Unexpected token <
- How to use map on an array of objects
- How to fetch elements in which object array exist
- How to get next element in Immutable List when use .map?
- React array map error in production build
- React Table column filter issue when the page render
- Image not showing on device for React Native movies tutorial on existing application
- ReactJS form rendering issue
- Change Page with useState, depending on websocket message 'Can't perform a React state update on an unmounted component'
- what does props in export default do?
- How to test if some element was enabled/disabled correctly after click a Checkbox?
- Is there a way to handle input hidden value in onSubmit?
- Flow seems to assume wrong type while iterating over Object.entries
- Keeping Client State Up-To-Date In Reagent / Clojurescript
- Why does using imported functon cause invalid hook error?
- React JS is not changing state after event inside FileReader