React component re-rendering to default data. Why?-CodePudding

Simple app that loops through my array of birthdays which has 5 birthdays in it by default. Once I delete a birthday and click the "add birthday" button my modal pops up. When I click my "close" button my birthdays component re-renders back to 5 birthdays when I am expecting to have 4 because I deleted one upon opening my modal. Why is it doing this?

Below is my code for my birthdays component, and modal component. I have also attached an image for a visual.

App component:

import react, { useState } from "react";
import Birthdays from "./Birthdays";
import BirthayData from "./BirthdayData";
import { AddBirthdayModal, AddBirthdayButton } from "./AddBirthdayModal";

function App() {
  //Keeping track of all birthdays
  const [allBirthdays, setAllBirthdays] = useState([...BirthayData]);
  //keeping track if add birthday modal is displayed
  const [isAddBirthdayShown, setIsAddBirthdayShown] = useState(false);

  //Delete selected birthday.
  const DeleteBirthday = (indx) => {
    const updatedBirthdays = [...allBirthdays];
    updatedBirthdays.splice(indx, 1);
    setAllBirthdays(updatedBirthdays);
  };

  return (
    <>
      <AddBirthdayModal
        setIsAddBirthdayShown={setIsAddBirthdayShown}
        isAddBirthdayShown={isAddBirthdayShown}
      />

      <div className="birthdays-container">
        <h2>{allBirthdays.length} Birthdays Today</h2>
        <div>
          {allBirthdays.length >= 1 &&
            allBirthdays.map((user, index) => {
              return (
                <Birthdays
                  key={user.id}
                  selfie={user.image}
                  name={user.Name}
                  age={user.AgeTurning}
                  deleteBirthday={DeleteBirthday}
                  index={index}
                />
              );
            })}
        </div>
      </div>

      <div>
        <button className="btn" onClick={() => setAllBirthdays([])}>
          Clear
        </button>
        <AddBirthdayButton setIsAddBirthdayShown={setIsAddBirthdayShown} />
      </div>
    </>
  );
}

export default App;

Birthdays Component

import React from 'react'
import "./Birthday.css"

export default function Birthdays(props) {

return (
    <div className="birthday-flex-container">

        <div className="image-container">
            <img
            className="user-image center"
            src={props.selfie}
            alt={`Selfie of person`}
            />
        </div>
        <div className="user-info center">
        <h4 className="name">{props.name}</h4>
        <span className="age">{props.age} years</span>
        </div>
        <div className="delete-birthday-container">
           <span onClick={() => props.deleteBirthday(props.index)}>X</span>
        </div>
       
    </div>
)

}

Modal Component

import React from "react";
import "./AddBirthdayModal.css";

function AddBirthdayModal({ setIsAddBirthdayShown, isAddBirthdayShown }) {
  const showHideClassName = isAddBirthdayShown
    ? "modal-container display-block"
    : "modal display-none";

  return (
    <div className={showHideClassName}>
      <div className="modal">
        <p className="modal-title">Who's Birthday?</p>
        <div className="form-container">
          <form className="birthday-form">
            <input type="text" placeholder="Name" />
            <br />
            <input type="text" placeholder="Age" />
            <br />
            <label for="myfile">Select a Image: </label>
            <input type="file" id="myfile" name="myfile" />
            <br />
            <button onClick={() => setIsAddBirthdayShown(false)}>Close</button>
          </form>
        </div>
      </div>
    </div>
  );
}

function AddBirthdayButton({ setIsAddBirthdayShown }) {
  return (
    <div>
      <button className="btn" onClick={() => setIsAddBirthdayShown(true)}>
        Add Birthday
      </button>
    </div>
  );
}

export { AddBirthdayModal, AddBirthdayButton };

CodePudding user response：

There is a typo in your import:

import react, { useState } from "react";

Should be:

import React, {useState} from "react";

CodePudding user response：

You are not passing the index parameter to the DeleteMyBirthday function when click delete parameter:

deleteBirthday={DeleteBirthday}

Needs to be:

 deleteBirthday={() => DeleteBirthday(index)}

Like this:

import react, { useState } from "react";
import Birthdays from "./Birthdays";
import BirthayData from "./BirthdayData";
import { AddBirthdayModal, AddBirthdayButton } from "./AddBirthdayModal";

function App() {
  //Keeping track of all birthdays
  const [allBirthdays, setAllBirthdays] = useState([...BirthayData]);
  //keeping track if add birthday modal is displayed
  const [isAddBirthdayShown, setIsAddBirthdayShown] = useState(false);

  //Delete selected birthday.
  const DeleteBirthday = (indx) => {
    const updatedBirthdays = [...allBirthdays];
    updatedBirthdays.splice(indx, 1);
    setAllBirthdays(updatedBirthdays);
  };

  return (
    <>
      <AddBirthdayModal
        setIsAddBirthdayShown={setIsAddBirthdayShown}
        isAddBirthdayShown={isAddBirthdayShown}
      />

      <div className="birthdays-container">
        <h2>{allBirthdays.length} Birthdays Today</h2>
        <div>
          {allBirthdays.length >= 1 &&
            allBirthdays.map((user, index) => {
              return (
                <Birthdays
                  key={user.id}
                  selfie={user.image}
                  name={user.Name}
                  age={user.AgeTurning}
                  deleteBirthday={() => DeleteBirthday(index)}
                  index={index}
                />
              );
            })}
        </div>
      </div>

      <div>
        <button className="btn" onClick={() => setAllBirthdays([])}>
          Clear
        </button>
        <AddBirthdayButton setIsAddBirthdayShown={setIsAddBirthdayShown} />
      </div>
    </>
  );
}

export default App;