JavaScript React component takes dictionary creates the aside bar with the li and link using JSX

I'm learning react and creating a blog along the way and on my articles I want to create a component that would take in a prop dictionary and the key would be the link the user can see and click on and the value would be the link for my routing. Thanks for any help.

import React from 'react'
import styled from 'styled-components'
import { Link } from 'react-router-dom'


function AsideBar(props) {
    return (
        <Container>
            <Sidebar>
                <Nav>
                    {for (const property in props.link_short){
                        <Link='{props.link_short[property]}'><li>property</li></Link>
                    }}
                </Nav>
            </Sidebar>
        </Container>
    )
}

export default AsideBar

Your format for Link looks incorrect. It's missing to and single-quotes should not be used.

You also cannot use a for loop to output JSX since the result needs to be part of the return value. Instead, map over the object entries

{Object.entries(props.link_short).map(([ text, link ]) => (
  <li>
    <Link to={link}>{ text }</Link>
  </li>
))}