react-jsx-dev-runtime.development.js:87 Warning: Each child in a list should have a unique "key" prop.

[ethan0905]

Any idea if this error was already there when you merge the frontend with the chat backend ? @chduong42

[ethan0905]

The error was in the developer tool console, on the /myProfile url.

To fix this, I changed in the sidebar component:

export default function Sidebar () {
  // const [isOpen, setOpen] = useState(false);

  return (
    <div className="Sidebar">
        <div className="SidebarIcon">
          <img src="/logo.png" alt="Logo" className="SidebarImage"/>
        </div>
        <ul className='SidebarList'>
          {SidebarData.map((val, key) => {
            return (
              <React.Fragment key={key}> // added the React.Fragment component and put the key here instead of inside the <li>
                <Link to={val.link} className='SidebarLink'>
                  <li className='row' id={window.location.pathname === val.link ? "active" : ""}>
                    <div id="icon">{val.icon}</div>
                    <div id="title">{val.title}</div>
                  </li>
                </Link>
              </React.Fragment>
            );
          })}
        </ul>
    </div>
  );
}

[ethan0905]

There is other errors in the console, when navigating through the website. Did you plan to fix this after the merge ?

[ethan0905]

When navigating to /Chat

react-dom.development.js:86 Warning: Encountered two children with the same key, `4`.
Keys should be unique so that components maintain their identity across updates.
Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

[ethan0905]

Ok i had my answer, those console log errors were not know, so I am letting this issue open until we fix them.

[ethan0905]

The last errors on /Chat page were fixed by @NargusS so i am closing the issue.