We Keep Coding

How do I fix this to show a variable number of menuitems?

I have this basic example, and I can see each menuitem by subscript, but the .map formation is failing. The following is the code. I am using a PDF to create this to help myself learn React.js, but the PDF is unclear. Can I attach the PDF?
This is menu.js
import React from "react"
import MenuItem from "../MenuItem"
export default class Menu extends React.Component {
render() {
return (
<div><h1>{this.props.menuName} Menu</h1>
<MenuItem {...this.props.menuItems[0]}></MenuItem>
<MenuItem {...this.props.menuItems[1]}></MenuItem>
<MenuItem {...this.props.menuItems.map((item) => <p>item</p>)}></MenuItem>
</div>
)
}
This is app.js
import "./App.css"
import MenuApp from "./components/MenuApp"
// let data = {...} (include the data array from above).
function App() {
let menuData = [
{
menuName: "Dinner",
menuItems: [
{
itemId: 1,
itemPrice: "12",
itemName: "Lasagne",
itemDescription:
"Meat and cheese layered between house-made pasta with bell peppers and onions.",
},
{
itemId: 2,
itemPrice: "10",
itemName: "Cheese Ravioli",
itemDescription: "Cheese-filled ravioli served with house red sauce.",
},
{
itemId: 3,
itemPrice: "14",
itemName: "Chicken Parmesan",
itemDescription:
"Breaded chicken topped with marinara sauce and lots of cheese served over house made spaghetti.",
},
]
}]
return (
<div className="App">
<MenuApp data={menuData}></MenuApp>
</div>
)
}
export default App
This is MenuApp.js
import "../../App.css"
import Menu from "../Menu"
function MenuApp() {
return (
<div className="App">
<Menu
menuName="Dinner"
menuItems={[
{
itemId: 1,
itemPrice: "12",
itemName: "Lasagne",
itemDescription:
"Meat and cheese layered between house-made pasta with bell peppers and onions.",
},
{
itemId: 2,
itemPrice: "10",
itemName: "Cheese Ravioli",
itemDescription: "Cheese-filled ravioli served with house red sauce.",
},
{
itemId: 3,
itemPrice: "14",
itemName: "Chicken Parmesan",
itemDescription:
"Breaded chicken topped with marinara sauce and lots of cheese served over house made spaghetti.",
},
]}
></Menu>
</div>
)
}
export default MenuApp
This is MenuItem.js
import React from "react"
export default class MenuItem extends React.Component {
render() {
return (
<div>
<span>${this.props.itemPrice}</span>
<h2>{this.props.itemName}</h2>
<p>{this.props.itemDescription}</p>
<button>Add to Cart</button>
</div>
);
}
}

It seems you are trying to render a variable number of <MenuItem /> components, in which case please try the below in Menu.js.
import React from "react";
import MenuItem from "../MenuItem";
export default class Menu extends React.Component {
render() {
return (
<div>
<h1>{this.props.menuName} Menu</h1>
{this.props.menuItems.map((item) => (
<MenuItem {...item} />
))}
</div>
);
}
}

There can be at least two problems here that are directly linked with what you might get.
Check that you are in fact passing menuItems as a property to Menu component, if it is undefined it will throw TypeError: can't access property "map" of undefined
Looking twice at the code, I noticed that you a de-structuring the result of
this.props.menuItems.map((item) => <p>item</p>) which would result in an incorrect mapping.
Depending on your ECMAScript version, replacing this line as-is would do.
{this.props.menuItems?.map((item) => <p>item</p>)}

Ho to map through mui icons to redirect to url like github/project-url

//i have a separate project file of the projectlist as an array with object, which have the necessary links that i need to map through.
//I just need some help with adding them into the github icon and when a user clicks they can navigate through to the appropriate links from the projectlist. I realise i need to use Object.entries(obj).map(). However, none of the methods i have attempted so far have worked. I am new to react so this may be simpler than I am actually making it. All help is appreciated.
import { useParams } from "react-router-dom";
import { ProjectList } from "../helpers/ProjectList";
import GitHubIcon from "#mui/icons-material/GitHub";
import LanguageIcon from "#mui/icons-material/Language";
import "../styles/ProjectDisplay.css";
//useParams returns an object key/value pairs of the dynamic params from the current URL that were matched by the <Route path>
function ProjectDisplay() {
const { id } = useParams();
const project = ProjectList[id];
return (
<div className="project">
<h1>{project.name}</h1>
<img src={project.image} alt="portfolio-projects" />
<p>
<b>Skills:</b>
{project.skill}
</p>
<GitHubIcon />
<LanguageIcon />
</div>
);
}
export default ProjectDisplay;
*//projectlist below*
export const ProjectList = [
{
name: "SquareSpace Website Homage",
image: squarespace,
skill: "HTML, CSS, JavaScript",
github: "https://github.com/LouisNzavi/Portoflio-Website",
website: "https://mysquarespacehomage.netlify.app/",
},
{
name: "HarryPorter theme TODO CRUD app",
image: harryporter,
skill: "HTML, CSS, JavaScript",
github: "https://github.com/LouisNzavi/TO-DO-APP",
website: "https://gabriellatodoapp.netlify.app/",
},
{
name: "Restaurant Reservation System",
image: reservation,
skill: "React, Redux Toolkit and TypeScript",
github:
"https://github.com/LouisNzavi/RestaurantReservation---reduxToolkit-Typescrpt",
},
{
name: "Deposit/Withdraw system",
image: depositWithdraw,
skill: "React, JavaScript, Redux: reducers/store/action-creators",
github: "https://github.com/LouisNzavi/React-with-redux-deposit-withdraw-",
},
{
name: "Four-card landing page feature",
image: fourcardfeature,
skill: "HTML, CSS, JavaScript",
github: "https://github.com/LouisNzavi/Four-card-feature-design-file",
},
{
name: "Vancouver Sleep Clinc website",
image: vancouver,
skill: "HTML, CSS",
github: "https://github.com/LouisNzavi/Vancouver-Sleep-Clinc-PROJ",
},
{
name: "Intro component with SignUp form",
image: signupForm,
skill: "HTML, CSS, JavaScript",
github: "https://github.com/LouisNzavi/Intro-Signup-form",
},
];

I think this is you want to do
import { useParams } from "react-router-dom";
import { ProjectList } from "../helpers/ProjectList";
import GitHubIcon from "#mui/icons-material/GitHub";
import LanguageIcon from "#mui/icons-material/Language";
import "../styles/ProjectDisplay.css";
//useParams returns an object key/value pairs of the dynamic params from the current URL that were matched by the <Route path>
function ProjectDisplay() {
const { id } = useParams();
const project = ProjectList[id];
return (
<React.Fragment>
{ProjectList.map((project, index) =>
<div key={index} className="project">
<h1>{project.name}</h1>
<img src={project.image} alt="portfolio-projects" />
<p>
<b>Skills:</b>
{project.skill}
</p>
<a href={project.github} rel="noopener noreferrer" target="_blank">
<GitHubIcon />
</a>
<LanguageIcon />
</div>
)}
</React.Fragment>
);
}
export default ProjectDisplay;
You can map your array to the component which will return an array of project components then you can directly render it. I am assuming you are using import to use images in project.name.

passing icons into a JS object

I have a js file with an array of objects, I am trying to load the attributes dynamically with a component and I cannot seem to figure out how to pass icons to the rendering component.
Here is the component that I am using to render the data:
import React, { Component } from 'react';
import SkillData from '../../store/skillData';
import './SkillsCard.css';
class SkillsCard extends Component {
state = { }
renderSkills = () =>
SkillData.map((skill, _id) =>
<div key={_id} className="skillCard col-sm-3 m-2">
<div className="top">
{/* ***line in question*** */}
<div className="icon">{skill.icon}</div>
<h5>{skill.title}</h5>
</div>
<div className="bottom">
{skill.techs.map((tech,index)=>(
<div className='skillCardList' key={index}> {tech}</div>
))}
</div>
</div>
);
render() {
return (
this.renderSkills()
);
}
}
export default SkillsCard;
and here is the file that I am pulling data from:
const SkillData = [
{
_id: '1',
icon: '../../assets/icons/frontend.png',
title: 'Front End',
techs: ['HTML5', 'CSS | SCSS', 'JavaScript', 'React | Redux', 'Angular']
},
{
_id: '2',
icon: '../../assets/icons/server.png',
title: 'Back End',
techs: ['NodeJS', 'Express', 'Postman', 'Authentication | Authorization']
},
{
_id: '3',
icon: '../../assets/icons/database.png',
title: 'Databases',
techs: ['MongoDB', 'mySQL', 'PostgreSQL']
}
]
export default SkillData
The issue that I am having is that I cannot get the path name to the icons to evaluate and actually render the icon; Instead my component renders the text, listed on the path. All the other attributes render just fine! Any thoughts?

Because you're just rendering the string value to the page:
<div className="icon">{skill.icon}</div>
Did you mean to use an <img> element?:
<div className="icon">
<img src={skill.icon} />
</div>

This worked when I added
const icons = require.context('../assets/icons', true);
in the SKillData.js file and set the paths to:
icons('./iconName.png'),
Thanks a million, David!

This works for me.
Direct require from your local assets folder, so you dont need the complexity to head file import a link from a json file request
{/* line in question */}
<div className="icon">
<img src={require(`${skill.icon}`)} />
</div>

react-bingmaps infobox not showing images

I am using react-Bingmaps to show map of location and infobox with shop photo. Everything works well except image, he doesn't load. File path is correct so where is problem in my code?
import React from 'react';
import { ReactBingmaps } from 'react-bingmaps';
class Map extends React.Component {
render(){
return(
<div className={'map'}>
<ReactBingmaps
bingmapKey='deleted_key'
center={[54.73695, 25.21741]}
zoom={15}
pushPins={[{
'location': [54.73695, 25.21741],
'option': {color: 'black'}
}]}
infoboxes={[{
'location': [54.73695, 25.21741],
'option': {
title: 'deleted_title',
description: "<img src={require('./media/shop-small.svg')} alt='Parduotuvės nuotrauka' />"
}
}]}
>
</ReactBingmaps>
</div>
)
}
}
export default Map;

How to render an object from an array into another component in React?

From an array of posts that are passed and rendered to one component, I want to be able to render a single post of this array into another component but I can't find a way to do this.
I have two components that I use for this case, the first component "Blog" renders a preview of all the posts that are in the array. Each post has a<Link to={/blog/post-1/:${post.id}}>Go to post</Link> to the second component "Post" which renders a single post from the array. I am using react boiler plate for this.
First my container who has a dummy array of posts:
import React from 'react';
// other imported stuff
import Blog from 'components/Blog';
class BlogPage extends React.Component {
render() {
// dummy posts data
const posts = [
{
id: 1,
title: 'How to Cook Blue Meth',
description: 'Lorem ipsum dolor sit amet, turpis at',
thump: 'thump.jpg',
hero: '/img/',
category: 'k1',
fullname: 'Walter White',
published: '10.05.2016, 15:30pm',
},
{
id: 2,
title: 'Passenger',
description: 'Lorem ipsum dolor sit amet, turpis at',
thump: 'thump.jpg',
hero: '/img/',
category: 'k2',
fullname: 'Chino Moreno',
published: '10.05.2016, 15:30pm',
},
// and more posts...
];
return (
// this is the first component
<div>
<Blog posts={posts} />
</div>
);
}
}
export default connect(null, mapDispatchToProps)(BlogPage);
Here is the first component Blog:
import React from 'react';
import { Link } from 'react-router';
class Blog extends React.Component {
renderPosts() {
return (
<ul>
{this.props.posts.map((post, idx) => {
return (
<li key={idx}>
<p>{post.title}</p>
<p>{post.category}</p>
<p>{post.thump}</p>
<p>{post.fullname}</p>
<p>{post.published}</p>
<Link to={`/blog/post-1/:${post.id}`}>Go to post </Link>
</li>
);
})}
</ul>
);
}
render() {
return (
<div>
{this.renderPosts()}
</div>
);
}
}
Blog.propTypes = {
props: React.PropTypes.array,
};
export default Blog;
And the second component Post:
import React from 'react';
class Post extends React.Component {
render() {
return (
<div>
<p>{this.props.post.hero}</p>
<p>Title:{this.props.post.title}</p>
<p>{this.props.post.description}</p>
<p>Category:{this.props.post.category}</p>
<p>{this.props.post.thump}</p>
<p>Author:{this.props.post.fullname}</p>
<p>Published:{this.props.post.published}</p>
</div>
);
}
}
Post.propTypes = {
post: React.PropTypes.object,
};
export default Post;
I import this second component into another container:
import React from 'react';
import Post from 'components/Blog/Post';
class PostPage extends React.Component {
render() {
return (
<div>
<Post post={post} />
</div>
);
}
}
export default connect(null, mapDispatchToProps)(PostPage);
This are my routes:
{
path: '/blog',
name: 'blog',
getComponent(nextState, cb) {
System.import('containers/BlogPage')
.then(loadModule(cb))
.catch(errorLoading);
},
},
{
path: '/blog/post-1/:id',
name: 'blog-post-1',
getComponent(nextState, cb) {
System.import('containers/BlogPage/PostPage')
.then(loadModule(cb))
.catch(errorLoading);
},
},
I just added this routes to the routes.js in the react boiler plate.
In this point I don't know how to pass the single post to get rendered. Any help would be appreciated

First you need to define the data in the reducer, that way you will be able to send it to any page that you want.
In this case I would recommend you to create two folders inside the containers folder, one for the lists of post and one for the single post.
You will need to define a reducer to store the list of posts (instead of defining the list in the component itself), take a look at the code already in the boiler plate: https://github.com/mxstbr/react-boilerplate/blob/master/app/containers/HomePage/reducer.js
Then you need to connect the reducer with the component and map the redux state with the component props, like this: https://github.com/mxstbr/react-boilerplate/blob/master/app/containers/HomePage/index.js#L139
Finally you would use those props to render the list, basically using this.props.posts on your BlogPage component, something similar to this: https://github.com/mxstbr/react-boilerplate/blob/master/app/containers/HomePage/index.js#L76
Once you have the list renderer you will need to create the PostPage component in a different folder, then connect the reducer that contains the data and get the item from the ID you are receiving in the URL param, (usually instead of that you would request to the server the data, but for the sake of simplicity just get the post from the existing reducer).
The idea here is to use redux to manage the data, that way you will be able to send data to any component, using the connect and mapping the state to the props.
PS: Don't forget to inject your reducer when defining the route: https://github.com/mxstbr/react-boilerplate/blob/master/app/routes.js#L33 this is a very important step ;)