I want to make a simple lists with items, but doesn't work and I dont know why. If I add "manually" these items, works. Sry for my english.
import './App.css'
const App = () => {
return (
<div className="App">
<ul>
{items.map((item, index) => {
<li key={index}><span>{item.title}</span></li>
})}
</ul>
</div>
);
}
export default App;
const items = [
{
title: "asd0",
image: ""
},
{
title: "asd1",
image: ""
},
{
title: "asd2",
image: ""
}
]
Someone could help me?
If you want to use TypeScript, you need to use something called interfaces and be specific about types with your data.
https://www.typescriptlang.org/docs/handbook/interfaces.html
To be able to render items, the array needs to be moved to inside the component. Here is index.js:
import './App.css'
const App = () => {
const items = [
{
title: "asd0",
image: ""
},
{
title: "asd1",
image: ""
},
{
title: "asd2",
image: ""
}
]
return (
<div className="App">
<ul>
{items.map((item, index) => {
<li key={index}><span>{item.title}</span></li>
})}
</ul>
</div>
);
}
export default App;
Related
I'm trying to export as a pdf a few items, where every item has a button that should export as a pdf a specific item. I also tried to give a key to each child, but it didn't work.
Here's my code:
import './Logout.css';
import React, { useRef } from "react";
import { NavLink } from 'react-router-dom';
import { PDFExport } from '#progress/kendo-react-pdf';
const Logout = () => {
const data = [
{ id: 1, name: 'Item 1', value: 100 },
{ id: 2, name: 'Item 2', value: 200 },
{ id: 3, name: 'Item 3', value: 300 },
];
const pdfExport = useRef(null);
const exportPDF = () => {
pdfExport.current.save();
};
return (
<div className='logOutStyle'>
<h1> you just loged out</h1>
<h3> to sing in again click here</h3>
{data.map((item, i) => (
<div key={item.id}>
<PDFExport key={item.id} ref={pdfExport} paperSize="A4" margin="2cm">
<p key={data[i]}>{data[i].name}</p>
</PDFExport>
<button key={item.id} onClick={exportPDF}>Export PDF</button>
</div>
))}
<NavLink to="/" className="underline text-tertiary">
return to home page
</NavLink>
</div>
)
}
export default Logout;
There is no relevant and updated answer for that in kendo react docs or chat gpt.
Please help me.
I did research on all over kendo react docs, chat gpt.
I hope someone will wake up and see the huge problem.
I'm new to react and trying to create a menu bar of sorts. All the similar questions seem to be older or not quite what I need. Regardless, I can't get this to work so please help figuring this out.
I'm using react-icons and would like to dynamically name the component so I can use the icons within this loop but <{val.icon} /> is throwing an error: "'...' expected." What can I do to make this work? I also can't seem to declare variables in a return statement to work around this, or at least I can't figure out how to do so. Any idea?
const values = [
{ id: 1, text: "Home", icon: "MdHomeFilled" },
{ id: 2, text: "Schedule", icon: "MdEditCalendar" },
{ id: 3, text: "Scores", icon: "MdSportsTennis" },
{ id: 4, text: "Stats", icon: "IoIosStats" }
];
return (
<>
<ul>
{values.map((val) => (
<li onClick={() => setActiveId(val.id)}>
<div className={activeId === val.id ? "NavLinkBox selected":"NavLinkBox"}>
<div className="navLinkBoxHdr"><{val.icon} /></div>
<div className="navLinkBoxCnt">{val.text}</div>
</div>
</li>
))}
</ul>
You can't just use a component name (i.e. as a string) in order to render a component.
In order to render it, you need to import it like you would regularly, then convert it into a variable with a capitalized name. For example:
import MdHomeFilled from './MdHomeFilled';
import MdEditCalendar from './MdEditCalendar';
export default function App() {
const values = [
{ id: 1, text: "Home", icon: MdHomeFilled },
{ id: 2, text: "Schedule", icon: MdEditCalendar }
];
return (
<ul>
{values.map((val) => {
const IconComponent = val.icon; // This way you can use this field as a component
return (
<li key={val.id} onClick={() => setActiveId(val.id)}>
<div className={activeId === val.id ? "NavLinkBox selected":"NavLinkBox"}>
<div className="navLinkBoxHdr"><IconComponent /></div>
<div className="navLinkBoxCnt">{val.text}</div>
</div>
</li>
);
})}
</ul>
);
}
i want to display list of an array from react but it's not showing when i think i did everything right? Please where im i wrong here
below is the code
import { useState } from 'react';
function App() {
const [items , setItems] = useState([{
id:1,
text:'simple 1'
},
{
id:1,
text:'simple 2'
},
{
id:1,
text:'simple 3'
},
])
return (
<div className="App">
{items.map((item) => (
<h1>{items.text}</h1>
))}
<h1>Hello from React js</h1>
</div>
);
}
export default App;
Because you're using items.text instead of item.text
{items.map((item) => (
<h1>{item.text}</h1>
))}
Code its work perfectly
I am trying to delete a certain entry in my list according to its index. However, the delete button is in a separate component. So I need to pass the function that deletes the entry in the list from my current app component to the child content component.
The App.js is:
import { useState } from 'react';
import './App.css';
import Content from './components/Content/Content';
function App() {
const Tours = [
{
image: "",
title: "",
price: "$",
text: ""
}
]
const [list, setList] = useState(Tours);
function handleRemove(id) {
console.log(id)
const newList = list.filter((item) => item.id !== id);
setList(newList);
}
return (
<div>
{list.map((value, index) => {
return (
<div key={index}>
<Content tour={value} delete={ () => handleRemove(index)}/>
</div>)
})
}
</div>
);
}
export default App;
component.js is:
const Content = (props) => {
return (
<div className="single-tour">
<img src = {props.tour.image} alt= {props.tour.title}></img>
<div className="container">
<h4 className ="title">{props.tour.title}</h4>
<h4 className="tour-price">{props.tour.price}</h4>
<button className="delete-btn" onClick={()=> props.delete}>Delete</button>
</div>
</div>
);
};
export default Content;
the console.log in the handleDelete is not showing, meaning the function is not being passed. What is the problem?
Please try:
onClick={()=> props.delete()}
or
onClick={props.delete}
In order to remove the card according to the id values, please also add them to your Tours object:
const Tours = [
{
image: "",
title: "",
price: "$",
text: "",
id: 1,
}
]
You should pass the value to the function like this.
here is the codesandbox link
https://codesandbox.io/s/react-func-props-j6idr?file=/src/index.js
you should and id field to the the list of tours and pass it down to the component
function App() {
const Tours = [
{
id: 0,
image: "https://via.placeholder.com/150/92c952",
title: "title 1",
price: "$ 1",
text: "text"
},
{
id: 1,
image: "https://via.placeholder.com/150/d32776",
title: "title 2",
price: "$ 2",
text: "description"
}
];
const [list, setList] = useState(Tours);
function handleRemove(id) {
console.log(id);
const newList = list.filter((item) => item.id !== id);
setList(newList);
}
return (
<div>
{list.map((value, index) => {
return (
<div key={value.id}>
<Content tour={value} delete={() => handleRemove(index)} />
</div>
);
})}
</div>
);
}
in the content component, you should pass the id of the tour object to the function
const Content = (props) => {
return (
<div className="single-tour">
<img src={props.tour.image} alt={props.tour.title}></img>
<div className="container">
<h4 className="title">{props.tour.title}</h4>
<h4 className="tour-price">{props.tour.price}</h4>
<button
className="delete-btn"
onClick={() => props.delete(props.tour.id)}
>
Delete
</button>
</div>
</div>
);
};
You're filtering the array by id which the objects do not have. What you can do is pass an index the filter method:
const newList = list.filter((item, i) => i !== index);
However, a better practice would be to add an id attribute to the object instead of relying on order.
Hello Stackoverflow community!
I'am practicing with react. I am building a very simple shopping cart system. With the app you can select from products. It adds to the shoppingcart. I'm got this error message: TypeError: Cannot read property 'details' of null.
I'am attaching my code.
App.js
import React, {useState, useEffect } from "react";
import Shop from "./Shop";
import Cart from "./Cart"
const ShoppingItems = [{
id: 1,
details: {
type: "cloth",
name: "Blue jacket",
price: 15000
}
},
{
id: 2,
details: {
type: "cloth",
name: "Trousers",
price: 9990
}
},
{
id: 3,
details: {
type: "cloth",
name: "T-shirt",
price: 5000
}
}
];
const App = () => {
const [selectedItem, setSelectedItem] = useState(null);
useEffect(() => {console.log(selectedItem)}, [selectedItem]);
return(
<div className="ui container">
<Shop Shopitems={ShoppingItems} setSelectedItem={setSelectedItem}/>
<Cart selectedItem={selectedItem}/>
</div>
);
};
export default App;
Shop.js
import React from "react";
const Shop = ({Shopitems, setSelectedItem}) => {
const AddItem = (id) => {
const selectedItem = Shopitems.find( item => item.id === id);
if(selectedItem)
{
setSelectedItem(selectedItem);
}
return;
};
const renderedItems = Shopitems.map((shopitem) => {
return(
<div key={shopitem.id} className="card">
<div className="content">
<div className="header">{shopitem.details.name}</div>
<div className="description">
{shopitem.details.price + " Ft"}
</div>
</div>
<div onClick={() => AddItem(shopitem.id)} className="ui bottom attached button">
<i className="cart icon"></i>
Add to cart
</div>
</div>
);
});
return (
<div className="ui cards">{renderedItems}</div>
);
};
export default Shop;
Cart.js
import React, {useState, useEffect} from "react";
const Cart = ({selectedItem}) => {
const [shoppingCart, setShoppingCart] = useState([]);
useEffect(() => {
//Adding to the shopping cart when an element selected
setShoppingCart([...shoppingCart, selectedItem]);
}, [selectedItem]);
const renderedItems = shoppingCart.map((item) => {
return(
<ul>
<li key={item.id}>
<div className="item">
{item.details.name}
</div>
</li>
</ul>
);
});
return(
<div>
<h1>Shopping Cart</h1>
{renderedItems}
</div>
);
};
export default Cart;
You need to verify that selectItem is not null because you cannot use .map on null, it needs to be an array ([]).
change you code to
import logo from './logo.svg';
import './App.css';
import { useEffect, useState } from 'react';
import Records from './Records';
import Shop from "./Shop";
import Cart from "./Cart"
const ShoppingItems = [{
id: 1,
details: {
type: "cloth",
name: "Blue jacket",
price: 15000
}
},
{
id: 2,
details: {
type: "cloth",
name: "Trousers",
price: 9990
}
},
{
id: 3,
details: {
type: "cloth",
name: "T-shirt",
price: 5000
}
}
];
const App = () => {
const [selectedItem, setSelectedItem] = useState(null);
useEffect(() => {console.log(selectedItem)}, [selectedItem]);
return(
<div className="ui container">
{selectedItem !== null ? <><Shop Shopitems={ShoppingItems} setSelectedItem={setSelectedItem}/> <Cart selectedItem={selectedItem}/> </>: <></>}
</div>
);
};
export default App;
This wil render without error but it is blanc page because you pass 'null' as value.
It may not be a value for the first time. To solve this problem, you can bet where you have this error:for example:
const renderedItems = Shopitems?Shopitems.map((shopitem) => {
return(
<div key={shopitem.id} className="card">
<div className="content">
<div className="header">{shopitem.details.name}</div>
<div className="description">
{shopitem.details.price + " Ft"}
</div>
</div>
<div onClick={() => AddItem(shopitem.id)} className="ui bottom attached button">
<i className="cart icon"></i>
Add to cart
</div>
</div>
);
}) :[] ;
return (
<div className="ui cards">{renderedItems}</div>
);
};
export default Shop;
'