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}
          />
        );
      })}

Related Query

More Query from same tag