You use props for that, which is just like an attribute in HTML, for example if you want to pass data from parent to child you can do it like this

<Sidebar>
    <UserDataElements data1={"some_data"} data2={"another_data"}>

    </UserDataElements>
</Sidebar>

And in UserDataElements you can access it using props

const UserDataElements = ({ data1, data2 }) => {
    // Here data1 and data2 will contain the data you have sent from parent to child
    ....
}

Or let's say, you want to pass data from child to parent, perhaps on click or something, then you can do it like this

import React from "react";
import userData from "./userData";
const UserDataElements = ({ data1, data2, onItemClick }) => {
  return (
    <div>
      UserData
      <ul className="user-ul">
        {userData.map((val, key) => {
          return (
            <li
              key={key}
              onClick={() => onItemClick && onItemClick(val, key)}
              className="userDataList"
            >
              <div className="d-flex  ">
                <div id="name">{val.name}</div>
                <div id="branch">{val.branch}</div>
              </div>
            </li>
          );
        })}
      </ul>
    </div>
  );
};

export default UserDataElements;

Note this specific line

onClick={() => onItemClick && onItemClick(val, key)}

Here we are invoking parent callback method, but before that we check if it exist, and In parent component we can access it like

import React from "react"; 
import SidebarElements from "./SidebarElements";

const Sidebar = () => {
    return (
        <div className="sideBar">
            <SidebarElements
                onItemClick={(val, key) => {
                    // here you get access to data of clicked element from child to parent
                }}
            >

            </SidebarElements>
        </div>
    ); 
};

export default Sidebar;

You should read more about component and props https://reactjs.org/docs/components-and-props.html