I created a simple array. Now on click, I want them to edit them using textarea.

But I want the default value of the text area to be taken from the clicked item. (Currently, I've set it as the first item in the array.)

Please also let me know if the question isn't clear.

My code:

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [edit, setEdit] = useState(false);
  const namesArray = [
    { name: "Test1", id: "1" },
    { name: "Test2", id: "2" },
    { name: "Test3", id: "3" }
  ];
  return (
    <>
      {edit ? (
        <div>
          <div className="backdrop" />
          <div className="editalign">
            <div className="Edit">
              {/* Need the default value to be the one Clicked */}
              <textarea defaultValue={namesArray[0].name}></textarea>
              <button className="button" onClick={() => setEdit(false)}>
                {" "}
                cancel
              </button>
            </div>
          </div>
        </div>
      ) : null}

      <div className="App">
        {namesArray.map((x) => (
          <div key={x.id} onClick={() => setEdit(true)} className="namesArray">
            {x.name}
          </div>
        ))}
      </div>
    </>
  );
}

Sharing the sandbox link here:

https://codesandbox.io/s/sweet-nash-wydv2p?file=/src/App.js

CodePudding user response：

You can use another state to control default value on that textarea

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [edit, setEdit] = useState(false);
  //the default value state
  const [selectedValue, setSelectedValue] = useState("");
  const namesArray = [
    { name: "Test1", id: "1" },
    { name: "Test2", id: "2" },
    { name: "Test3", id: "3" }
  ];
  return (
    <>
      {edit ? (
        <div>
          <div className="backdrop" />
          <div className="editalign">
            <div className="Edit">
              {/* Need the default value to be the one Clicked */}
              <textarea defaultValue={selectedValue}></textarea>
              <button className="button" onClick={() => setEdit(false)}>
                {" "}
                cancel
              </button>
            </div>
          </div>
        </div>
      ) : null}

      <div className="App">
        {namesArray.map((x) => (
          <div
            key={x.id}
            onClick={() => {
              setEdit(true);
              setSelectedValue(x.name);
            }}
            className="namesArray"
          >
            {x.name}
          </div>
        ))}
      </div>
    </>
  );
}

The sandbox link

CodePudding user response：

Yeah like pilchard mentioned ....

tracking id for e.g. as below

const { useState } = React;

function App() {
  const [edit, setEdit] = useState({ action: false, id: null });
  const namesArray = [
    { name: "Test1", id: "1" },
    { name: "Test2", id: "2" },
    { name: "Test3", id: "3" },
  ];
  return (
    <React.Fragment>
      {edit.action ? (
        <div>
          <div className="backdrop" />
          <div className="editalign">
            <div className="Edit">
              {/* Need the default value to be the one Clicked */}
              <textarea defaultValue={namesArray[edit.id - 1].name}></textarea>
              <button className="button" onClick={() => setEdit(false)}>
                {" "}
                cancel
              </button>
            </div>
          </div>
        </div>
      ) : null}

      <div className="App">
        {namesArray.map((x) => (
          <div
            onClick={() => setEdit({ action: true, id: x.id })}
            className="namesArray"
            key={x.name}
          >
            {x.name}
          </div>
        ))}
      </div>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

.App {
  font-family: sans-serif;
  text-align: center;
  display: flex;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
}

.namesArray {
  width: 100px;
  height: 100px;
  border-style: solid;
  border-radius: 10px;
  border-width: 1px;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.backdrop {
  width: 100vw;
  height: 100vh;
  background-color: black;
  opacity: 0.2;
  z-index: 1;
  position: fixed;
}

.Edit {
  z-index: 2;
  width: 250px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-radius: 10px;
  border-width: 2px;
  position: fixed;
  background-color: white;
  color: black;
}
.button {
  width: 80px;
  height: 30px;
  margin: 10px;
}

.editalign {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>