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>
))}