Split one react component into two - reactjs

Question

I would like to know how I should split this code into two separate components.
import React from "react";
const DropdownMenu = (props) => {
const DropdownItem = (props) => {
return (
<a href="#" className="menu-item">
<span className="icon-button">{props.rightIcon}</span>
{props.children}
</a>
);
};
return (
<div className="dropdown">
<DropdownItem>{props.companyName[0].name}</DropdownItem>
<DropdownItem>{props.companyName[1].name}</DropdownItem>
<DropdownItem>Settings</DropdownItem>
<DropdownItem>Testing</DropdownItem>
<DropdownItem>Get our App</DropdownItem>
<DropdownItem>Mobile</DropdownItem>
<DropdownItem>Log out</DropdownItem>
</div>
);
};
export default DropdownMenu;
I try to split them up by myself but then my dropdown menu breaks and instead of opening a container down, it opens container inside my navbar, I think the issue with {props.children} but I don't know exactly how to fix it.
After splitting components I want it to remain like on this screenshot

Answer 1

there is 2 problems with your code.
well first, don't ever create a component inside render function of another component.
second and root cause of your problem is you have 2 variables named "props" in same scope
const DropdownItem = (props) => {
return (
<a href="#" className="menu-item">
<span className="icon-button">{props.rightIcon}</span>}
{props.children}
</a>
);
};
const DropdownMenu = (props) => {
return (
<div className="dropdown">
<DropdownItem>{props.companyName[0].name}</DropdownItem>
<DropdownItem>{props.companyName[1].name}</DropdownItem>
<DropdownItem>Settings</DropdownItem>
<DropdownItem>Testing</DropdownItem>
<DropdownItem>Get our App</DropdownItem>
<DropdownItem>Mobile</DropdownItem>
<DropdownItem>Log out</DropdownItem>
</div>
);
};
export default DropdownMenu
that should fix it.

Answer 2

you should pass rightIcon to every DropdownItem component that it`s passed to it and better to named your props instead of passing them as children
first component:
const DropdownItem = ({ label, rightIcon=' ', href='' }) => {
return (
<a href={href} className="menu-item">
<span className="icon-button">{rightIcon}</span>
{label}
</a>
);
};
second component:
const DropdownMenu = (props) => {
return (
<div className="dropdown">
<DropdownItem
label={props?.companyName?.[0]?.name}
rightIcon="icon-name"
href="href for this item"
/>
<DropdownItem label={props?.companyName?.[1]?.name} rightIcon="second-icon-name"/>
<DropdownItem label="Settings" />
<DropdownItem label="Testing" />
<DropdownItem label="Get our App" />
<DropdownItem label="Mobile" />
<DropdownItem label="Log out" rightIcon='log-out-icon'/>
</div>
);
}