How to make an edit function in an entire list with 2 inputs?

Question

I am doing a whole list and it has two inputs. My problem is that I am not being able to do an editing function for these inputs. For easy viewing I will send the code, images and codesandbox link.

App.js:

import React, { useState } from "react";
import Form from "./Form";
import Modal from "./Modal";
import { v4 as uuidv4 } from "uuid";

export default function App() {
  const [value, setValue] = useState("");
  const [value2, setValue2] = useState("");
  const [todos, setTodos] = useState([]);

  const getValue = (event) => {
    setValue(event.target.value);
  };

  const getValue2 = (event) => {
    setValue2(event.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    setTodos([...todos, { title: value, content: value2, id: uuidv4() }]);
  };

  function deleteTodo({ id }) {
    setTodos(todos.filter((todos) => todos.id !== id));
  }
  return (
    <div>
      <Form
        valueProp={value}
        valueProp2={value2}
        onChangeProp={getValue}
        onChangeProp2={getValue2}
        typeProp="submit"
        handleSubmitProp={handleSubmit}
      />
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {console.log(todo)}
            <Modal
              handleDeleteProp={() => deleteTodo(todo)}
              title={todo.title}
              content={todo.content}
              id={todos.id}
            />
          </li>
        ))}
      </ul>
    </div>
  );
}

Form.js:

import React from "react";

export default function Form({
  valueProp,
  valueProp2,
  typeProp,
  onChangeProp,
  onChangeProp2,
  handleSubmitProp
}) {
  return (
    <div>
      <form onSubmit={handleSubmitProp}>
        <input value={valueProp} onChange={onChangeProp} />
        <input value={valueProp2} onChange={onChangeProp2} />
        <button type={typeProp}>ENTER</button>
      </form>
    </div>
  );
}

Modal.js:

import React,{useState} from "react";
import Edit from './Edit'
import './Modal.css'

export default function Modal({ title, content, handleDeleteProp }) {
  const [showEdit,setShowEdit] = useState(false)
  const changeShow = ()=>{
    setShowEdit(!showEdit)
  }
  return (
    <div>
      <p>{title}</p>
      <p>{content}</p>
      <button onClick={handleDeleteProp}>delete</button>
      <button onClick={changeShow}>EDITAR</button>
      {showEdit && <Edit />}
    </div>
  );
}

Edit.js:

import React from "react";

export default function Edit() {

  return (
    <div>
     <input />
      <input />
      <button>EDIT</button>
    </div>
  );
}

Generally speaking, my goal is when I click on "EDIT", pass the values of these inputs generated in Edit.js for values that have already been generated previously.

If you want to take a look at the application here is the link to the codesandbox: https://codesandbox.io/s/solitary-architecture-yv2jb?file=/src/Edit.js:0-160

Answer 1

There is a better abstraction in the code you have made so far that can be applied to your app but I will help you with the code you have already written, because I believe you are learning the library and you are on the right track :)

1. We need to create the state that will manipulate the task to be edited.

// App.js
const [edit, setEdit] = useState(null);

2. Create the function responsible for updating this new state.

// App.js
const updateTodo = (todo) => {
    setEdit(todo);
    setValue(todo.title);
    setValue2(todo.content);
}

3. Pass the function of update for the component <Modal />.

// App.js
...
<Modal
    handleDeleteProp={() => deleteTodo(todo)}
    handleEditProp={() => updateTodo(todo)}
    title={todo.title}
    content={todo.content}
    id={todo.id}
/>
...

4. Perform a new validation in the function handleSubmit.

// App.js
...
const handleSubmit = (e) => {
    e.preventDefault();

    const newTodo = { title: value, content: value2 };
    const todosArr = [...todos];

    if (!!edit) {
        const index = todosArr.findIndex(todo => todo.id === edit.id);
        todosArr[index] = { ...newTodo, id: edit.id };
    } else {
        newTodo.id = uuidv4();
        todosArr.unshift(newTodo);
    }

    setTodos(todosArr);
    setValue("");
    setValue2("");
    setEdit(null);
};
...

5. And finally, prepare the component <Modal /> to receive the update function and activate it when interacted.

// Modal.js
export default function Modal({ title, content, handleDeleteProp, handleEditProp }) {
  return (
    <div>
      <p>{title}</p>
      <p>{content}</p>
      <span onClick={handleDeleteProp}>delete</span>
      <span onClick={handleEditProp}>edit</span>
    </div>
  );
}