score:0
right now, you have a single state.show
that is shared by all the elements generated by map. you could make state.show
an array but there is a much better way to handle this.
you should create a separate component where you will put all the code inside your map function. put state.show
and commentinputhandler
inside that new child component. then each child component will be able to show/hide itself independently of the other ones
parent
{this.state.posts.map(post => <postcomponent key={post.id} post={post}/>)}
postcomponent
this.state = { show: false }
commentinputhandler = () => {
...
render()
return (
<div classname="card mt-4">
...
score:1
right now show
state holds for only one boolean, you might change it to an object that will hold each post show
condition with _id
as key (of course you can add it direct into posts
state, just you didn't attach it to your code...)
this.state = {
//inital as empty object
show: {}
}
componentdidmount() {
// i update state through didmount, though it is not the only truth and depends on rest code either logic
let show = {}
this.state.posts.map(post => show[post._id] = false)
this.setstate({show})
}
now you can change commentinputhandler
into something dynamic
<span onclick={()=>this.commentinputhandler(post._id)} classname="badge badge-pill badge-primary mr-3 cp">comment</span>
commentinputhandler = id => {
const { show } = this.state
this.setstate({
show: {...show, [id]: !show.id}
})
}
and adapt your checker
{this.state.show[post._id] ? ...
Source: stackoverflow.com
Related Query
- How to open only one div inside map function in react show it cannot open other div element
- how to make state work in only one div inside map function in react
- How to get only one set state function from use state or some other hook React JS,
- How to Collapse only one div when using React and map
- How to manipulate the DOM inside of map function using onChange event on one of the checkboxes with react hooks
- React Bootstrap make only one collapse open up when being rendered with a map function / display relevant information in each collapse
- How to add a div every 3rd map/loop inside map react function
- How to loop inside map function using jsx format React JS
- How do I get acces to only one item from map method in react js
- How to Separate Jsx inside render function into a separate file in ES6? or any other solution in react to separate the Logic and presentation?
- How to map inside map function and show the data in Reactjs
- How to use Bootstrap Modal inside map function in React Js to render indivisual elements?
- How to only trigger one onClick function when inside a component also with onClick event?
- How to return only 1 item in an array in react using map function
- Recharts: how is it possible to show only the value of ONE data point inside a Tooltip?
- React - How to select all checkboxes based on one without using the map function
- How to fix 'Hooks can only be called inside the body of a function component' error in React custom hook?
- how to show react bootstrap modal inside the function
- How to disable only selected button onClick inside .map() function of REACT js
- How to show only one active item at a time with react and material ui
- react - How to open show more on a function component?
- React - How to show skeleton placeholders until Array map function ended
- Map inside map in react ( one is local array of images and the other is title from json )
- How to expand and collapse the table rows in plain react js. Show only one row if the description of the row is multiple and show the expand button
- How to dynamically and conditionally render select options inside of a map function using React Hooks
- Unable to use div components with bootstrap classes inside map function in react
- Cannot read property 'substr' of undefined in React JS inside map function
- How to call a function of a react component in other js files inside the project
- React - how to make only one increment function setState multiple variables?
- React - How to open only one modal in an array
More Query from same tag
- useState returning empty array
- Update State in React (Firebase) Undefined Value
- React Using Hook set state undefined when trying delete each item
- OpenWeather API React Request Header Fields Too Large 431
- Going to another page in ReactJS
- Wrong laravel mix rewrite url path when place project in subfolder
- The prop is lost after the page is refreshed in react
- react-router go back a page how do you configure history?
- How to prevent CORS policy to block requests from localhost to third party API?
- Saga from redux-saga is being ignored, only the reducer is used
- Serving a static react application behind a Kubernetes Ingress
- angular virtual scroll doesn't re-render the list when list item added
- Passing function from object to React Native ListView
- Bollinger bands in React application with a library
- ReactJS First fetch is undefined
- react setState function is not workin
- Limit character length of mapped value in React
- React SSR: SyntaxError: Invalid or unexpected token when importing image
- Click drag and onClick in react?
- React BrowserRouter - url not working in build (401)
- How to fix regex Unterminated regular expression literal
- React Table column filter issue when the page render
- to add .default or not?: dynamic imports in react router 3 for webpack code-splitting
- Node Sass Error due to Unsupported Environment OS X 64-bit with unsupported runtime
- Dealing with multiple asynchronous function calls in a for loop
- How to implement drag'n'drop for nested lists in React?
- TypeError: Cannot read properties of undefined (reading 'map') ReactJs Getting data from a file
- React - Material UI table to contain a dropdown in each row
- How can I check a click on a child component using jest, if the callback isn't passed as prop?
- React.js, How to track previous values while rendering?