Develop Reference

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

How to link different react pages?

I am new to react,
I want to connect the button on the main page with a separate react page.
Here I want to connect the contact link href directing to the contact react page.
import React from 'react';
(function Nav (){
return(
<div id="navid">
<nav className="navbar fixed-top navbar-expand-lg">
<a className="navbar-brand" href="home">Manav</a>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<a className="nav-link" href="./Contact">Colab</a>
</li>
<li className="nav-item">
<a className="nav-link" href="x">Blogs</a>
</li>
</ul>
</div>
</nav>
</div>
);
}
export default Nav;

Since React apps are usually SPA's (Single Page Application) that means that usually there is just one html page and react will handle the content switching on the page. So using <a> tags will not work since it expects a separate HTML page to exist which does not exist.
The correct way is to use a routing library like react-router and use its Link component to handle the routing or switching the pages.

You have to use react-router-dom npm package to perform routing operations in react.

First you have to install npm install react-router react-router-dom
Now import import { Switch, Route, BrowserRouter } from "react-router-dom" in your App.js file.
Now use <BrowserRouter> <Switch> <Route> tags as shown below:
import Blogs from "./Components/Blogs";
import Colab from "./Components/Colab";
import Nav from "./Pages/Nav";
import { Switch, Route, BrowserRouter } from "react-router-dom";
const App = () => {
return (
<div className="App">
<BrowserRouter>
<Nav />
<Switch>
<Route path="/BLog">
<Blog />
</Route>
<Route path="/Colab">
<Colab />
</Route>
</Switch>
</BrowserRouter>
</div>
);
};
export default App;
after setting up Routes of components in App.js go to your Nav.js
import {Link} from "react-router-dom" in Nav.js and set the Links to the path as shown below:
import React from "react";
import { Link } from "react-router-dom";
const Nav = () => {
return (
<div>
<Link to="Blog" style={linkStyle}>
Blog
</Link>
<Link to="Colab" style={linkStyle}>
Colab
</Link>
</div>
);
};
export default Nav;
Yo dont need to use <a className="nav-link" href="x">Blogs</a> instead we use Link and Route. You can get more information from the documentation of react-Route-dom

How can I fix the error on my React App after trying to export a functional component?

My biggest problem is that I have not been able to get my react app to display since the first week of the course's assignment. I am at the end of the second week, and have been dealing with this second assignment for several weeks since the course is online through coursera.org.
I have gone over the assignment from week one and watched the videos over and over again, and made many revisions after googling a lot of the answers to the correct code. I have also gone through the resources of week one that the course offers.
I posted numerous times on week one's discussion board and follow the suggestions given. I still was not able to get the react app to display, so I moved one the week 2 assignment, and continued working on it.
After more than two weeks of a lot of trial and error and following the error prompts from the visual studio which is the one I am using for this course, I finally started to get some input on what errors I needed to fix on the editor through the cmd window. Every time I make corrections and run yarn start again, the app started to let me know what I needed to fix on the code. The following image is the last error that I got. Any suggestions are greatly appreciated.
This is the code of the functional component that is giving me the error.
import React from 'react';
import { Card, CardImg, CardImgOverlay, CardTitle, Breadcrumb, BreadcrumbItem } from 'reactstrap';
import {Link } from 'react-router-dom';
import { DishDetail } from 'reactstrap';
import { Menu } from 'reactstrap';
function RenderMenuItem ({dish, onClick}) {
return(
<card>
<Link to={`/menu/${dish.id}`} >
<cardImg width = "100%" src ={dish.image} alt={dish.name} />
<cardImgOverlay>
<cardTitle>
{dish.name}
</cardTitle>
</cardImgOverlay>
</Link>
</card>
);
}
function Millie (props) {
const menu = props.dishes.map((dish)=>{
return(
<div key={dish.id} className="col-12 col-md-5 m-1">
<RenderMenuItem dish={dish} />
</div>
);
});
}
return(
<div className="container">
<div className="row">
<Breadcrumb>
<BreadcrumbItem><Link to="/home">Home</Link></BreadcrumbItem>
<BreadcrumbItem active>Menu</BreadcrumbItem>
</Breadcrumb>
<div className="col-12">
<h3>Menu</h3>
<hr />
</div>
</div>
<div className="row">
{menu}
</div>
</div>
);
export default function Menu(){
}
Almost all if code has been provided by professor.
Error page from React App
Any suggestions are greatly appreciated!
ty
Mildred

As the error says, you're trying to declare something called "Menu" when something called "Menu" already exists.
import { Menu } from 'reactstrap';
export default function Menu(){
}
Either rename the Menu function component or rename the imported one:
// either rename this on import
import { Menu as ReactStrapMenu } from 'reactstrap';
// or call your Menu component something else
export default function MyMenu () {
}
As Chris points out in the comment below, it seems likely that you don't intend to export the empty Menu function at the bottom at all, and perhaps meant to export your Millie component? In that case, just replace the default export at the end with:
export default Millie;
Or export it in the same place you're defining it:
export default function Millie (props) {
const menu = props.dishes.map((dish)=>{
// etc.
}

Mildred! Nice that you're practicing, courses are awesome to learn the basics.
As described in the error you provided, "Menu" is declared twice. If you check the code snippet, you can see that you imported "Menu" from a library, but also declared a function called "Menu".
That is where that error comes from. Just change your default function to any other name, such as "MyMenu"

"Value is declared but never read" but i am declaring the value

I'm trying to build a portfolio website in React ,i'm very new to React (about 3 days), and i have imported some code for the website nav bar and declared it in the code but it doesn't show up on the website and vscode says that the value was not declared. How do i fix this?
I've tried turning the code into a component and rearranging the code but i still get the same result.
App.js - main code
import React from 'react';
import './App.css';
import navBar from './navBar/navBar';
function App() {
return (
<div className="app">
//navBar that won't show up
<navBar />
<div className="landingPage"></div>
<div className="projectPage"></div>
<div className="aboutPage"></div>
<div className="footer"></div>
</div>
)
}
export default App;
Code for the navBar
import React from "react";
import "./navBar.css";
function navBar() {
return (
<div>
<h1>NAVBAR PLACEHOLDER</h1>
</div>
)
}
export default navBar;

Your question title is little bit wierd. You have fixed the value error in your code. But you still have error with the component:
//navBar that won't show up
<navBar />
In react custom built components name should always start with capital letter. So do this:
import NavBar from './navBar/navBar';
// -- ^^ you can name it anything as it's default import
<NavBar />

React.Children.only expected to receive a single React element child with <Link > component

I am learning react by myself. In my rendering loop I tried to add the element inside so that I can make the hyperlink for each data. But I got this issue:React.Children.only expected to receive a single React element child. Could someone know why it happened? Here is part of my code.Hope it make easier to understand my question. I skipped some parts of my coding as it seems the issue happened in the render part.
app.js
render() {
return (
<Router className="App">
<div>
<nav className="navbar navbar-default">
<div className="container-fluid">
<Link to="/coding-fun">Coding Fun</Link>
</div>
</nav>
<Switch>
// import condingFun.js file as Coding
<Route exact path="/coding-fun" component={Coding} />
<Route path="/coding-fun/:title" component={singleArticle} />
</Switch>
</div>
</Router>
);
}
}
codingFun.js
ps: posts is json data which I didn't add here as too many data.
class Coding extends Component {
render() {
return (
<div className="nav-text">
<h1>Coding fun page</h1>
// posts is data from api, and it renders listPage.js as
ListPage
<ListPage items={posts} />
</div>
);
}
}
export default Coding;
listPage.js
import React, { Component } from "react";
import { BrowserRouter as Link } from "react-router-dom";
class Listing extends Component {
constructor(props) {
super(props);
this.state = { data: this.props.items };
}
render() {
return (
<table>
<tbody>
// loop "post" data from parent component (items) codingFun.js
{this.state.data.map(post => (
<tr key={post.id}>
<td>
<Link to={"coding-fun/" + post.title}>{post.title}</Link>
</td>
<td>{post.content}</td>
</tr>
))}
</tbody>
</table>
);
}
}
If I just add
<Link to={"coding-fun/" + post.title}>{post.title}</Link>
this line, it got "React.Children.only expected to receive a single React element child." issue. If I only add {post.title} in the tag, there is no any issue. So I tried to make the title as link in each row. But I don't know how to make it.
Thanks a lot

The property to does not exist in BrowserRouter. You are also confusing yourself a little bit there by aliasing BrowserRouter with Link because there exists an actual component in react-router called Link. And this is how you use it:
import { Link } from 'react-router-dom'
<Link to={"coding-fun/" + post.title}>{post.title}</Link>

I'm guessing it's because you are doing the import wrong. The import statement should be import { Link } from 'react-router-dom'

You are confusing between Router, Link and Route. So basically,
Router is used to wrap your entire app, to make it fullstack-alike, which means the URL in address bar can be changed and the specific view is rendered respectively
Link is used the same way as <a> tag, which means that it will take you to that URL when clicked
Route, on the other hand, is used to decide what should be rendered under a specific link. This is what you should use to pass children component
In your case, you should change the import statement to:
import { Link } from 'react-router-dom'
Hope this help solve your problem :)