React js code problem

[vanaver]

Body

After submitting the form to add a contact, the contacts list does not update on the ContactsPage. It seems that the updated contacts state from App.js is not passed as props to ContactsPage.

Files to check:
https://github.com/vanaver/unworking-

App.js — state management and passing props to ContactsPage via router

ContactsPage.js — receiving and using the contacts prop

Guidelines

• I have read and understood this category's guidelines before making this post.

[0xtbarkan]

The problem is in the way contacts are being passed to the ContactsPage component through React Router. Your use of useEffect confirms that the contacts state is updating correctly in App.js (you see the log "✅ contacts изменились"), but the ContactsPage isn't re-rendering with the new data.
This happens because React Router creates the route elements only once during the initial rendering. When you update the contacts state in App.js, the router doesn't automatically recreate the route elements with the new props.

check this solution can help :
first use a Loader Function

const router = createBrowserRouter(createRoutesFromElements(
 <Route path="/" element={ <Root/> }>
   <Route index element={ <Navigate to={ROUTES.CONTACTS} replace/> }/>
   <Route 
     path={ROUTES.CONTACTS} 
     element={ <ContactsPage addContact={addContact} /> }
     loader={() => ({ contacts })}
   />
   <Route 
     path={ROUTES.APPOINTMENTS} 
     element={ <AppointmentsPage addAppointment={addAppointment} /> }
     loader={() => ({ contacts, appointments })}
   />
 </Route>
));

[vanaver]

i replace a peace of code with yours and see this error, honestly i dont know about loader and maybe do smth wrong

[0xtbarkan]

check this :
App.js :

import React, { useState, useEffect } from "react";
import { RouterProvider, createBrowserRouter, createRoutesFromElements, Route, Navigate, Outlet } from "react-router-dom"
import Root, { ROUTES } from "./components/root/Root";
import { AppointmentsPage } from "./containers/appointmentsPage/AppointmentsPage";
import { ContactsPage } from "./containers/contactsPage/ContactsPage";

function App() {
  const [contacts, setContacts] = useState([]);
  const [appointments, setAppointments] = useState([]);
  
  useEffect(() => {
    console.log("✅ contacts изменились:", contacts);
  }, [contacts]);
  
  const addContact = (name, phone, email) => {
    const contact = { name, phone, email };
    console.log(contact);
    setContacts((prev) => [...prev, contact]);
  };
  
  const addAppointment = (title, contact, date, time) => {
    setAppointments((prev) => [...prev, {title, contact, date, time }]);
  };

  const ContactsPageWrapper = () => (
    <ContactsPage contacts={contacts} addContact={addContact} />
  );
  
  const AppointmentsPageWrapper = () => (
    <AppointmentsPage 
      appointments={appointments} 
      addAppointment={addAppointment} 
      contacts={contacts} 
    />
  );
  
  const router = createBrowserRouter(createRoutesFromElements(
    <Route path="/" element={<Root />}>
      <Route index element={<Navigate to={ROUTES.CONTACTS} replace />} />
      <Route path={ROUTES.CONTACTS} element={<ContactsPageWrapper />} />
      <Route path={ROUTES.APPOINTMENTS} element={<AppointmentsPageWrapper />} />
    </Route>
  ));
  
  return (
    <RouterProvider router={router} />
  );
}

export default App;

ContactsPage.js

import React, { useState, useEffect } from "react";
import { ContactForm } from "../../components/contactForm/ContactForm";
import { TileList } from "../../components/tileList/TileList";

export const ContactsPage = ({ contacts, addContact }) => {
  const [name, setName] = useState("");
  const [phone, setPhone] = useState("");
  const [email, setEmail] = useState("");
  const [duplicate, setDuplicate] = useState(false);

  useEffect(() => {
    if (name) {
      const isDuplicate = contacts.some(contact => 
        contact.name.toLowerCase() === name.toLowerCase()
      );
      setDuplicate(isDuplicate);
    }
  }, [name, contacts]);

  useEffect(() => {
    console.log('ContactsPage contacts updated:', contacts);
  }, [contacts]);

  const handleSubmit = (e) => {
    e.preventDefault();
    
    if (!duplicate) {
      addContact(name, phone, email);
      setName("");
      setPhone("");
      setEmail("");
    } else {
      alert("Такой контакт уже существует!");
    }
  };

  return (
    <div>
      <section>
        <h2>Add Contact</h2>
        <ContactForm
          name={name}
          setName={setName}
          phone={phone}
          setPhone={setPhone}
          email={email}
          setEmail={setEmail}
          handleSubmit={handleSubmit}
        />
      </section>
      <hr />
      <section>
        <h2>Contacts</h2>
        <TileList items={contacts} />
      </section>
    </div>
  );
};

[vanaver]

its also dont work, but thank you)

[vortexory]

// App.js
import React, { useState, useEffect } from "react";
import {
  RouterProvider,
  createBrowserRouter,
  createRoutesFromElements,
  Route,
  Navigate
} from "react-router-dom";

import Root, { ROUTES } from "./components/root/Root";
import { AppointmentsPage } from "./containers/appointmentsPage/AppointmentsPage";
import { ContactsPage } from "./containers/contactsPage/ContactsPage";

function App() {
  const [contacts, setContacts] = useState([]);
  const [appointments, setAppointments] = useState([]);

  useEffect(() => {
    console.log("✅ Updated contacts:", contacts);
  }, [contacts]);

  const addContact = (name, phone, email) => {
    const newContact = { name, phone, email };
    console.log("📥 Adding contact:", newContact);
    setContacts((prev) => [...prev, newContact]);
  };

  const addAppointment = (title, contact, date, time) => {
    const newAppointment = { title, contact, date, time };
    setAppointments((prev) => [...prev, newAppointment]);
  };

  const router = createBrowserRouter(
    createRoutesFromElements(
      <Route path="/" element={<Root />}>
        <Route index element={<Navigate to={ROUTES.CONTACTS} replace />} />
        <Route
          path={ROUTES.CONTACTS}
          element={
            <ContactsPage contacts={contacts} addContact={addContact} />
          }
        />
        <Route
          path={ROUTES.APPOINTMENTS}
          element={
            <AppointmentsPage
              appointments={appointments}
              addAppointment={addAppointment}
              contacts={contacts}
            />
          }
        />
      </Route>
    )
  );

  return <RouterProvider router={router} />;
}

export default App;

// ContactsPage.js
import React, { useState, useEffect } from "react";
import { ContactForm } from "../../components/contactForm/ContactForm";
import { TileList } from "../../components/tileList/TileList";

export const ContactsPage = ({ contacts, addContact }) => {
  const [name, setName] = useState("");
  const [phone, setPhone] = useState("");
  const [email, setEmail] = useState("");
  const [duplicate, setDuplicate] = useState(false);

  useEffect(() => {
    const isDuplicate = contacts.some(
      (contact) => contact.name.toLowerCase() === name.toLowerCase()
    );
    setDuplicate(isDuplicate);
  }, [name, contacts]);

  useEffect(() => {
    console.log("📦 Contacts prop in ContactsPage:", contacts);
  }, [contacts]);

  const handleSubmit = (e) => {
    e.preventDefault();

    if (!duplicate) {
      addContact(name, phone, email);
      setName("");
      setPhone("");
      setEmail("");
    } else {
      alert("Такой контакт уже существует!");
    }
  };

  return (
    <div>
      <section>
        <h2>Add Contact</h2>
        <ContactForm
          name={name}
          setName={setName}
          phone={phone}
          setPhone={setPhone}
          email={email}
          setEmail={setEmail}
          handleSubmit={handleSubmit}
        />
      </section>
      <hr />
      <section>
        <h2>Contacts</h2>
        <TileList items={contacts} />
      </section>
    </div>
  );
};

I fixed the way contacts were passed into ContactsPage, making sure the props flow properly. Also tweaked the duplicate check so it actually reacts to updates. The submit handler now clears the form right after adding a new contact, which it wasn’t doing before. I threw in some console.logs too, so it’s easier to see what’s going on while testing. Overall, just cleaned things up so the contact list updates like you'd expect.

I hope this works for you.

[vanaver]

this code better then my thank you, but problem still exist(

[21besart]

Hi there @vanaver! I ran your code and noticed the issue lies in how the router is being set up inside the App component.

You're creating a new router instance on every render by calling createBrowserRouter inside the function body. This results in React Router remounting components on every render, which can cause unexpected behavior like state resets and lost navigation history.

To fix this, you should move the router definition outside of the component, or better yet, use the standard BrowserRouter with Routes, which offers a more stable and idiomatic setup.

Here’s a simplified and recommended way to structure your App.js using BrowserRouter:

import React, { useState, useEffect } from "react";
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
import Root, { ROUTES } from "./components/root/Root";
import { AppointmentsPage } from "./containers/appointmentsPage/AppointmentsPage";
import { ContactsPage } from "./containers/contactsPage/ContactsPage";

function App() {
  /*
  Define state variables for 
  contacts and appointments 
  */
 const [contacts, setContacts] = useState([]);
 const [appointments, setAppointments] = useState([])
   useEffect(() => {
    console.log("✅ contacts изменились:", contacts);
  }, [contacts]);
  

  /*
  Implement functions to add data to
  contacts and appointments
  */
  const addContact = (name, phone, email) => {
    const contact = { name, phone, email };
    console.log(contact)
    setContacts((prev) => [...prev, contact]);
  };

 const addAppointment = (title, contact, date, time) => {
  setAppointments((prev) => [...prev, {title, contact, date, time }])
 };

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Root />}>
          <Route index element={<Navigate to={ROUTES.CONTACTS} replace />} />
          <Route
            path={ROUTES.CONTACTS}
            element={
              <ContactsPage
                contacts={contacts}
                addContact={addContact}
              />
            }
          />
          <Route
            path={ROUTES.APPOINTMENTS}
            element={
              <AppointmentsPage
                appointments={appointments}
                addAppointment={addAppointment}
                contacts={contacts}
              />
            }
          />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

This approach avoids the rerender issue and follows best practices for routing in React. Hope this helps! 🙌

[vanaver]

thank you very much! thats work!! i will try to understand and learn this way to code)