score:2
Accepted answer
Have a component for each element so they each have their own unique prompt
For example,
//Element.js
import React from "react";
export default function Element({
i,
blogTitle,
handleChange,
_id,
deleteOne,
blogBody,
Item
}) {
const [prompt, setPrompt] = React.useState(true);
return (
<div>
<p>{i}</p>
{prompt ? (
<p>{blogBody}</p>
) : (
<input
onChange={handleChange}
name="newerValue"
value={Item.newerValue}
placeholder="new title"
></input>
)}
{prompt ? (
<p>{blogTitle}</p>
) : (
<input
onChange={handleChange}
name="newerValue2"
value={Item.newerValue2}
placeholder="new title"
></input>
)}
<p>{blogTitle}</p>
<p>{_id}</p>
<button onClick={deleteOne} value={_id}>
Delete
</button>
{prompt ? (
<button
onClick={() => {
setPrompt(!prompt);
}}
>
Edit
</button>
) : (
<button
onClick={() => {
setPrompt(!prompt);
}}
>
Submit
</button>
)}
</div>
);
}
//App.js
Now in the body return of your main file you could just do this
First import import Element from "./Element";
Then add the new component with specified props
{getBasic.miscData.map(({ blogBody, blogTitle, _id }, i) => {
return (
<Element
i={i}
blogTitle={blogTitle}
handleChange={handleChange}
_id={_id}
deleteOne={deleteOne}
blogBody={blogBody}
Item={Item}
/>
);
})}
Source: stackoverflow.com
Related Query
- onclick changes all mapped items instead of just one
- React FAQ component expands all items instead of just one
- React / NextJS - onClick targets all mapped items - how do i target just one?
- I am trying to implement a way to delete swappable items, but my delete method removes all the items instead of just the one that is clicked
- ReactJS hover/mouseover effect for one list item instead of all list items
- React/React Hooks: onChange function to change text is changing for all 3 elements simultaneously instead of just one
- Hover effect happens on all articles, instead of just the one I'm hovering
- Button onClick opens all image preview instead one
- react is editing all array objects instead of just one array object
- React, onMouseOver event trigger all items in list instead of one
- Delete button removes all the children , instead of just the one with the key
- Action changes state of all values instead of just particular ones
- Prevent onClick event to happen in all rows instead of one sigle row per click
- React, onMouseEnter event trigger all items instead of one hovered?
- onClick triggering all sub menus instead of only the clicked one
- 'onClick' event affects state of all components, instead of just one
- React - filter deletes all items instead of one
- Why all react components changes height instead of one
- All button state chnages instead of one button on onclick
- @page runs on all pages instead of just one when using css-modules with react
- JavaScript React Front-End: Opening one collapse button, all collapse buttons open instead of just the one
- React: update one item in a list without recreating all items
- Purge-css is removing all css stylings instead of just the unused ones
- React Router: Update only one query parameter instead of replacing all
- Three cards in a row instead of all cards in one column
- Monaco editor deltaDecorations changes the style of the whole text instead of just the given range
- React Hooks Form Validation OnBlur triggers all fields instead of just specific field
- How to render one object from map instead all of them?
- How do I combine two arrays in react to get a new one with all of the items from the previous two?
- Changed style onClick applies to all the ListItems instead of single ListItems
More Query from same tag
- Reacts version of ngForm
- Handling events on dynamically created <select> dropdown options
- SetInterval only run for first time
- Trouble selecting some JSON data with ReactJS
- SetState callback gets called before state is mutated in react
- Enzyme: Test fails on BrowserHistory function
- How to namespace parent props using mapState
- how to sort an array by dates in a nested array
- How to handle null values inside my sort by function?
- How to handle notifications in React-Redux depending on state?
- Flexbox to fill available space not working inside React.js component
- Binding multipal row hang or crash web page using React with redux toolkit
- Fetch data from NewsApi (react, axios)
- How to access firebase result outside then method React
- How to access a one of the asp.net core controller action view into an iframe using react application?
- React error: 'values' is not defined, no-undef
- react app local storage is not setting up
- React Object Entries Renders Nothing
- Is this the right way to pass state to Redux action?
- Type ref is not assignable to type IntrinsicAttributes
- How to not sync states between browser tabs in Jhipster react project
- How to call a function when a Card is Clicked - MERN Stack
- onClick event binding (not a button)
- pass object from state as props to child component
- javascript react pass value from method
- Framer animation using react intersection observer. Need multiple animations but get only one
- React isomorphic component with both client-side and server-side rendering
- collapseOnSelect in react-bootstrap navbars with react-router-dom NavLinks
- Using props inside react styled components
- Why does my HOC NotEmpty not work when access property?