this is very simple react code, but I cannot figure out why it's so mad at me for trying to do a map. I double check the closing brackets and that the key matches and I've tried adding semi colon all over and nothing happened, the error is "Parsing error: ',' expected." on my recipes object but everything checks out. Thanks for any help!
import React from "react";
const RecipeCard = () => {
const recipes = [
{
id: "recipe-id-1",
name: "Tomato Soup",
description: "Love red soup 😎",
ingredient: [
{ name: "tomato", measurement: 3, unit: "cup" },
{ name: "water", measurement: 3, unit: "cup" },
]
},
{
id: "recipe-id-2",
name: "Potato Soup",
description: "Love potato soup 😎",
ingredient: [
{ name: "potato", measurement: 3, unit: "cup" },
{ name: "water", measurement: 3, unit: "cup" },
]
}
];
return (
{recipes.map((recipe) => (
<div className="recipeCard">
<h2>{recipe.name}</h2>
<p>{recipe.description}</p>
<ul>
{recipe.ingredient.map((ingredient) => (
<li>
{ingredient.name} - {ingredient.measurement}
{ingredient.unit}
</li>
))}
</ul>
</div>
))}
)
}
export default RecipeCard;
you need to group the content. use </> fragment
return (
<>
{recipes.map((recipe) => (
<div className="recipeCard">
<h2>{recipe.name}</h2>
<p>{recipe.description}</p>
<ul>
{recipe.ingredient.map((ingredient) => (
<li>
{ingredient.name} - {ingredient.measurement}
{ingredient.unit}
</li>
))}
</ul>
</div>
))}
</>
)
Do not use default export and wrap the output in a div:
import React from "react";
export const RecipeCard = () => {
const recipes = [
{
id: "recipe-id-1",
name: "Tomato Soup",
description: "Love red soup 😎",
ingredient: [
{ name: "tomato", measurement: 3, unit: "cup" },
{ name: "water", measurement: 3, unit: "cup" },
]
},
{
id: "recipe-id-2",
name: "Potato Soup",
description: "Love potato soup 😎",
ingredient: [
{ name: "potato", measurement: 3, unit: "cup" },
{ name: "water", measurement: 3, unit: "cup" },
]
}
];
return (
<div>
{recipes.map((recipe) => (
<div className="recipeCard">
<h2>{recipe.name}</h2>
<p>{recipe.description}</p>
<ul>
{recipe.ingredient.map((ingredient) => (
<li>
{ingredient.name} - {ingredient.measurement}
{ingredient.unit}
</li>
))}
</ul>
</div>
))}
</div>
)
}
Related
I have two arrays of objects.
I'm trying to create a function that can subtract values from one array of objects from another array of object using the same id on name in REACT
export default function App() {
const stockArray = [
{ id: 1, name: "Iphone", amount: 23 },
{ id: 2, name: "Samsung", amount: 28 },
{ id: 3, name: "Huawei", amount: 14 },
{ id: 4, name: "Motorola", amount:20 }
];
const basketArray = [
{ id: 1, name: "Iphone", amount: 3 },
{ id: 3, name: "Huawei", amount: 4 }
];
const [stock, setStock] = React.useState(stockArray);
const [basket, setBasket] = React.useState(basketArray);
const handleUpdateStock = () => {
// How to subtract amount values in basketArray from amount values in stockArray
in objects with the same id or name.
// the result should be :
// const stockArray = [
// { id: 1, name: "Iphone", amount: 20 },
// { id: 2, name: "Samsung", amount: 28 },
// { id: 3, name: "Huawei", amount: 10 },
// { id: 4, name: "Motorola", amount:20 }
// ];
}
return (
<div>
<h3>Stock:</h3>
{stock.map(product=> (
<h5>{product.name} - {product.amount} </h5>
))}
<br/>
<h3>Basket:</h3>
{basket.map(product=> (
<h5>{product.name} - {product.amount} </h5>
))}
<button onClick={handleUpdateStock}>Save and update stock </button>
</div>
);
}`
You can loop your stock array, and compare each product with in it with each product from the basket.
If they have the same id you should subtract the amount from the product.amount from the the product inside the basket.
In the end we should setStock with the new array.
function App() {
const stockArray = [
{ id: 1, name: "Iphone", amount: 23 },
{ id: 2, name: "Samsung", amount: 28 },
{ id: 3, name: "Huawei", amount: 14 },
{ id: 4, name: "Motorola", amount:20 }
];
const basketArray = [
{ id: 1, name: "Iphone", amount: 3 },
{ id: 3, name: "Huawei", amount: 4 }
];
const [stock, setStock] = React.useState(stockArray);
const [basket, setBasket] = React.useState(basketArray);
const handleUpdateStock = () => {
const newStock = stock.map(product => {
const productInBasket = basket.find(el => el.id === product.id);
if (!productInBasket) return product;
return {
...product,
amount: product.amount - productInBasket.amount,
}
})
setStock(newStock);
}
return (
<div>
<h3>Stock:</h3>
{stock.map(product=> (
<h5 key={product.id}>{product.name} - {product.amount} </h5>
))}
<br/>
<h3>Basket:</h3>
{basket.map(product=> (
<h5 key={product.id}>{product.name} - {product.amount} </h5>
))}
<button onClick={handleUpdateStock}>Save and update stock </button>
</div>
);
}
ReactDOM.createRoot(
document.getElementById("root")
).render(
<App />
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
function substract (stockArray,basketArray){
return stockArray.map(stock=>{
const basket = basketArray.find(basket=>stock.id===basket.id);
if(basket){
return {
...stock,
amount:stock.amount-basket.amount,
}
} else {
return stock;
}
})
}
this function iterates all indexes in stockArray, will find same object with the same id in basketArray and if basket is an object, it changes value of amount in stock
I am trying to render product images from and array but they are not being displayed in my browser. There is no error message nor warning. Reactjs app is compyling with no errors.
This is my file with the data:
const sunglasses_card = [
{
id: Math.random(),
product_name: ' Hydra',
price: '173',
currency: '$',
thumb: './images/test.png'
},
{
id: Math.random(),
product_name: 'Oakley Kato',
price: '298',
currency: '$',
thumb: './images/oakley_kato.png'
},
{
id: Math.random(),
product_name: 'Sutro Lite Sweep',
price: '184',
currency: '$',
thumb: './images/sutro_lite.png'
},
{
id: Math.random(),
product_name: 'Encoder',
price: '255',
currency: '$',
thumb: './images/encoder.png'
}
]
export default sunglasses_card;
And this is my dummy component:
import './App.css';
import sunglasses_card from '../src/data/product_data'
function App() {
const sunglases = sunglasses_card
return (
<div className="App">
{sunglases.map((sunglass) => {
return (
<div key={sunglass.id}>
<h1>This is a product</h1>
<p>{sunglass.price}</p>
<img src={sunglass.thumb} alt="anteojos" />
</div>)
})}
</div>
);
}
Price of each product is being rendered perfectly fine. Any reason why am i not being able to display the image?
I am kinda new to reactjs I am using the react-dropdown library https://github.com/fraserxu/react-dropdown and I am trying to make a dropdown menu so my user can switch between 2 languages. However, I am not sure how to properly update the new value for language.
Here's my code:
const Navbar = () => {
const languages = [
{
code: 'fr',
name: 'Français',
country_code: 'fr',
key : 1
},
{
code: 'en',
name: 'English',
country_code: 'gb',
key: 2
},
]
const defaultLanguages = languages[0].name;
const changeLanguage = (e) => {
console.log(e)
}
return (
<div className={color ? 'header header-bg' : 'header'}>
<ul>
<li>
<DropDown options={languages} value={defaultLanguages} onChange={(e) => changeLanguage} />
</li>
</ul>
</div>
)
}
export default Navbar
as you can see I want to switch between french and english but I am not sure how to pass the value to the dropdown component.
You need to use the same attributes in your options (languages) passed to the Dropdown component. You can see the examples of both flag options and object options on the official repo:
//Options
//Flat Array options
const options = [
'one', 'two', 'three'
];
//Object Array options
const options = [
{ value: 'one', label: 'One' },
{ value: 'two', label: 'Two', className: 'myOptionClassName' },
{
type: 'group', name: 'group1', items: [
{ value: 'three', label: 'Three', className: 'myOptionClassName' },
{ value: 'four', label: 'Four' }
]
},
{
type: 'group', name: 'group2', items: [
{ value: 'five', label: 'Five' },
{ value: 'six', label: 'Six' }
]
}
];
Below code worked on my side:
import Dropdown from 'react-dropdown';
const Navbar = () => {
const languages = [
{
value: 'fr',
label: 'Français',
},
{
value: 'en',
label: 'English',
country_code: 'gb',
},
];
const defaultLanguages = languages[0].label;
const changeLanguage = (e) => {
console.log(e);
};
return (
<div className={'header'}>
<ul>
<li>
<Dropdown
options={languages}
value={defaultLanguages}
onChange={changeLanguage}
/>
</li>
</ul>
</div>
);
};
export default Navbar;
enter image description here
Create local state for tracking currently selected language. Also move out languages array outside of component. Here is the code:
const languages = [
{
code: 'fr',
name: 'Français',
country_code: 'fr',
key : 1
},
{
code: 'en',
name: 'English',
country_code: 'gb',
key: 2
},
]
const Navbar = () => {
const [selectedLanguage, setSelectedLanguage] = useState(languages[0].name);
const changeLanguage = (option) => {
setSelectedLanguage(option.name)
}
return (
<div className={color ? 'header header-bg' : 'header'}>
<ul>
<li>
<DropDown options={languages} value={selectedLanguage} onChange={changeLanguage} />
</li>
</ul>
</div>
)
}
export default Navbar
How can I make a separate trigger for each Collapsible element with a single useState (preferably)?
CodeSandBox - https://codesandbox.io/s/separate-triggers-question-forked-vgs5b
App.js
import React from "react";
import Collapsible from "react-collapsible";
function App() {
const database = [
{ id: 1, name: "Name1", description: "Desc1" },
{ id: 2, name: "Name2", description: "Desc2" },
{ id: 3, name: "Name3", description: "Desc3" },
{ id: 4, name: "Name4", description: "Desc4" },
{ id: 5, name: "Name5", description: "Desc5" }
];
const [items, setItems] = React.useState(database);
const [open, setOpen] = React.useState(false);
return (
<div className="tracker_master">
{items.map((item, index) => (
<div onClick={() => setOpen(!open)} key={item.id}>
{item.name.toUpperCase()}
<Collapsible open={open}>
<div>{item.description.toUpperCase()}</div>
</Collapsible>
</div>
))}
</div>
);
}
export default App;
To have seperate triggers for each item I recommend to abstract each element into its own component that has its own open state.
So you could do something like this:
const Item = ({ item }) => {
const [open, setOpen] = React.useState(false);
return (
<div onClick={() => setOpen(!open)} key={item.id}>
{item.name.toUpperCase()}
<Collapsible open={open}>
<div>{item.description.toUpperCase()}</div>
</Collapsible>
</div>
);
};
function App() {
const database = [
{ id: 1, name: "Name1", description: "Desc1" },
{ id: 2, name: "Name2", description: "Desc2" },
{ id: 3, name: "Name3", description: "Desc3" },
{ id: 4, name: "Name4", description: "Desc4" },
{ id: 5, name: "Name5", description: "Desc5" }
];
return (
<div className="tracker_master">
{database.map((item) => (
<Item item={item} key={item.id} />
))}
</div>
);
}
sandbox example
If you want to use single useState then your single state object should manage open flag of all the items as shown below (I have updated your code and tested its working fine).
openFlags is single state which maintains the open flag of each item by id and use it for triggering collabse and expand the items independently.
import React from "react";
import Collapsible from "react-collapsible";
function App() {
const database = [
{ id: 1, name: "Name1", description: "Desc1" },
{ id: 2, name: "Name2", description: "Desc2" },
{ id: 3, name: "Name3", description: "Desc3" },
{ id: 4, name: "Name4", description: "Desc4" },
{ id: 5, name: "Name5", description: "Desc5" }
];
const [items, setItems] = React.useState(database);
let initialOpenFlags = {}
items.forEach((i) => {
initialOpenFlags = {
...initialOpenFlags,
[i.id]: false
};
});
const [openFlags, setOpenFlags] = React.useState(initialOpenFlags);
return (
<div className="tracker_master">
{items.map((item, index) => (
<div
onClick={() =>
setOpenFlags({ ...openFlags, [item.id]: !openFlags[item.id] })
}
key={item.id}
>
{item.name.toUpperCase()}
<Collapsible open={openFlags[item.id]}>
<div>{item.description.toUpperCase()}</div>
</Collapsible>
</div>
))}
</div>
);
}
export default App;
https://codesandbox.io/s/react-example-m9l6j?fontsize=14
I am new to react can you please show working code in codesandbox, thanks in advance
In the following code How do I change code so it shows the lent details of the corresponding name when I click the notes.name button?
function Todo() {
let notes = [
{
id: 1,
name: "Brad",
lent: [{ id: 1, amount: 1000 }, { id: 2, amount: 2000 }]
},
{
id: 2,
name: "John",
lent: [{ id: 1, amount: 3000 }, { id: 2, amount: 4000 }]
}
];
const [state, setState] = React.useState(false);
const handleClick = e => {
setState(!state);
console.log(e.target);
};
return (
<div>
{notes.map(note => (
<ul key={note.id}>
<button onClick={handleClick}>{note.name}</button>
</ul>
))}
{state &&
notes[0].lent.map((
mapper //how do I change index here?
) => (
<ul key={mapper.id}>
<li>{mapper.id}</li>
<li>{mapper.amount}</li>
</ul>
))}
</div>
);
}
Please check the solution here, https://codesandbox.io/s/react-example-8f0jy?fontsize=14.
I have tried to store the id as a reference when the user clicks on a button. And then try to filter the notes based on the id.
function Todo() {
let notes = [
{
id: 1,
name: "Brad",
lent: [{ id: 1, amount: 1000 }, { id: 2, amount: 2000 }]
},
{
id: 2,
name: "John",
lent: [{ id: 1, amount: 3000 }, { id: 2, amount: 4000 }]
}
];
const [id, setId] = React.useState(-1);
const handleClick = id => {
setId(id);
};
return (
<div>
{notes.map(note => (
<ul key={note.id}>
<button onClick={() => handleClick(note.id)}>{note.name}</button>
</ul>
))}
{id >= 0 &&
notes
.filter(note => note.id === id)[0]
.lent.map((
mapper //how do I change index here?
) => (
<ul key={mapper.id}>
<li>{mapper.id}</li>
<li>{mapper.amount}</li>
</ul>
))}
</div>
);
}