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

Question

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

Answer 1

There is a typo in your import:
import react, { useState } from "react";
Should be:
import React, {useState} from "react";

Answer 2

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;

Answer 3

I was able to figure it out.
For some reason when I render my modal component like this
{isAddBirthdayShown && (
<AddBirthdayModal
setIsAddBirthdayShown={setIsAddBirthdayShown}
isAddBirthdayShown={isAddBirthdayShown}
/>
)}
Instead of
const showHideClassName = isAddBirthdayShown
? "modal-container display-block"
: "modal display-none";
It works as expected. I'm not sure why. All I do is attached a class to my modal and make it a "display:block" when isAddBirthday is true and "display: none" to hide it when its false.