Cancel Button is not cancelling while editing

[jessicareinh]

Hello,
I am currently working on our Edit Function in our Event App. To edit our own events there are Input Fields for possible changes in the data. We have a save and cancel button. Unfortunately the cancel button is saving the changes just like the save button.

I have committed and pushed my current status. It is accessible at this link. The branch is called "edit-button". And you can find the code in components/myEventsList

Description of the error:
How can one reproduce the error?
When clicking on my Events and adding a new event, you can save the data and afterwards click on the edit button. By changing the data and also canceling the process, you can reproduce the error. Because the changes will be nevertheless saved.

Where and when does it occur?
When we try to cancel the process.
What is expected, what happens?
I expect, that when I cancel the editing process, the original data will be displayed and the changes will be dismissed.

What have I already tried:
I have already searched online for this problem and I have tried to change the values of the setter functions. Nothing is really working.

Thank you for your help!

[onemanwenttomow]

The issue seems to arise from the fact that you are currently mutating the props. For example

 onChange={(e) => (event.title = e.target.value)}

I think there are 2 possible options here.

1 is we move each Section to be it's own component. Then we can create an copy of each event (in state) in the component, and make changes to that copy. Then if the user presses cancel we can set the value back to what was passed in as a prop.

e.g. something like

function Event({ event, onSave }) {
  const [isEditing, setIsEditing] = useState(false);
  const [editableEvent, setEditableEvent] = useState({ ...event });
 // rest of component

2. Alternatively if you don't want to create a separate component, we can make use of the id that you are keeping track ok. It would be slightly more complicated but would look something like this.

export default function MyEventsList({ ownEvents, setOwnEvents }) {. // <- We also need to pass setOwnEvents down as a prop
  const [editEvent, setEditEvent] = useState(null);
  const [isEditing, setIsEditing] = useState(false);
  const [editableEvent, setEditableEvent] = useState({});

  const handleEdit = (event) => {
    setEditEvent(event.id);
    setIsEditing(true);
    setEditableEvent({ ...event });
  };

  const handleCancel = () => {
    setEditEvent(null);
    setIsEditing(false);
    setEditableEvent({});
  };

  const handleInputChange = (e, field) => {
    setEditableEvent({ ...editableEvent, [field]: e.target.value });
  };

  const handleSave = () => {
    const updatedEvents = ownEvents.map((event) =>
      event.id === editableEvent.id ? editableEvent : event
    );
    setOwnEvents(updatedEvents);
    handleCancel();
  };

  return (
    <StyledList>
      {ownEvents.length === 0 && <p>You have not added any events yet </p>}
      {ownEvents.map((event) => (
        <EventCard key={event.id}>
          <Title>{event.title}</Title>
          <Paragraph>{event.date}</Paragraph>
          <Paragraph>{event.time}</Paragraph>
          <Paragraph>{event.location}</Paragraph>
          <Paragraph>{event.description}</Paragraph>
          {isEditing && editEvent === event.id && (
            <Section>
              <input
                type="text"
                defaultValue={event.title}
                onChange={(e) => handleInputChange(e, "title")}. // -< Please note the change here...
                placeholder="Title*"
                required
              />

        // rest of component

[jessicareinh]

I might have another question regarding the solution we spoke about earlier. I updated the branch and added the component EditEvent. Unfortunately I am not getting there with save handler function...

Thank you for helping!

[onemanwenttomow]

Jessica and i spoke in person regarding this. There were some issues with prop drilling and following the data flow.