how can I display toasts by traversing an array of objects, each of these objects with a unique id and names. I need to display a toast for each object inside this array, with a text and the value {item.name}.
Example:
https://codesandbox.io/s/exciting-cloud-9oqhke?file=/src/App.js:0-583
In this example I used the React-toastify, and added the array of objects as an example, in that example there is a button that launches one toast with ALL names on it, but I need to press that button and it displays a toast for each object inside the array.
So you can call toast.error function for each array object like this
const testData = [
{ id: 1, name: "John Doe" },
{ id: 2, name: "Victor Wayne" },
{ id: 3, name: "Jane Doe" }
];
testData.map((user) => (
toast.error(`${user.name} ${someText}`)
));
Related
I have a custom doropdown that takes a key value pair
export interface People {
id: number | string;
name: string;
}
These are passed in as an object
<Dropdown
dataList={people}
value={values.person}
/>
These are mapped over and output in a list
<ListItem id={person.id}>{ person.name }</ListItem>
I have another list I want to map over
[
{
placeId: 1,
placeName: 'Paris',
country: 'France'
},
{
placeId: 2,
placeName: 'Barcelona',
country: 'Spain',
}
]
Now the only way I can think of doing it is mapping over and sanitise the data, returning an array of key-value pairs to match the component (id, name). Then transforming back.
Is there a way to make the dropdown more generic to take the first 2 properties as ones to map over and ignore the rest?
I'm stuck since a while trying to access a nested array inside another array after filtering it by an id. To be clear, this is the mock data I have:
bundleSets: [
{
id: 1,
title: "bundle set 1",
bundles: [
{
bundleTitle: "bundle 1",
content:[]
},
{
bundleTitle: "bundle 2",
content:[]
}
]
},
{ id:2,
title: "bundle set 2",
bundles: [
{bundleTitle: "ciaopao", content:[]}
]
},
{ id:3,
title: "bundle set 3",
bundles: [
{bundleTitle: "ciapo", content:[]}
]
}
]
Now I need to filter each bundleSets by id, and then access the bundles array inside and mapping those elements. This is what I tried to do:
const [key,setKey]=useState(1)
const [bundles,setBundles]=useState([])
useEffect(()=>{
const filteredBundles = bundleSets && bundleSets.filter(bundleSet=>bundleSet.id==key).map(filteredBundles=>{
return filteredBundles.bundles
})
setBundles(filteredBundles)
},[key])
Now If I try mapping the new state I can see on the console.log a weird [Array(1)] instead of the usual [{}] and I can't render it to the page. Where am I getting wrong with this?
Array.prototype.map returns an array and the callback you're passing to the map method returns filteredBundles.bundles which is an array. So, you get an array of arrays. filteredBundles is a confusing name, btw.
Since you're looking up the bundle by id and the ids are unique in the bundleSets array, you can use Array.prototype.find to find the bundle set by id and then get the bundle array. You can return an empty array if find returns undefined (if the key is not found).
const bundles = bundleSets?.find(set => set.id === key)?.bundles || []
I am looking to add a new row to the existing table. Is there any way achieving that I have read the api of the reactdatagrid but no luck in finding it. any other way of doing this?
First map you need the data you need to render in table to your component state. Let's say to an array.
tableData = [
{
id: 1,
name: 'Tim',
age: 25,
},
{
id: 2,
name: 'Jane',
age: 22,
},
]
And populate the table with that state array. Then add a button and on button click just push some empty value to the array.
const { tableData } = this.state;
tableData.push({ id: null, name: '', age: null});
this.setState({ tableData });
Just add a new entry on your data that you feed on the table. So setState when you press a button to append the data.
I have built a filter that filters dog names based on UI in a search box. At the moment it searches name. But what if I want to be able to type in a breed, age, colour etc. how can I set it up to basically filter on all of the props of the dogs. So the user can type in a color or a breed and it will filter. Rather then only filtering on the one prop.
Const dogs = [
{
name:"rex",
sex: "male",
age: 6
}
]
Then my filter is as below:
Let filteredDogs= this.state.dogs.filter((dog) =>{
return dog.name.toLowerCase().includes
(this.state.searchDog.toLowerCase())
})
I’m assuming I just need to add another condition into the filteredDogs variable.
Thanks for any assistance
You coulp iterate over all values in your object using Object.values and then applying the function you gave to each of them.
Do not forget to convert them with toString otherwise the age property will not work :
let filteredDogs = this.state.dogs
.filter(dog => Object.values(dog)
.some(val => val.toString().toLowerCase()
.includes(this.state.searchDog.toLowerCase())))
For this solution I considered your data to be the following :
const dogs = [
{
name: "rex",
sex: "male",
age: 6
},
{
name: "fred",
sex: "female",
age: 9
},
]
{
id: "a",
deck_list: [{
name: 'Deck1',
job: 'mage',
cards: []
}],
match: []
}
Hi I am trying to make a DB for card game Decks. In 'deck_list', there are list of decks that created by users. Whenever user adds a new deck, then it would be inserted into deck_list.
However, when the name of the deck is already there, then the deck should be updated, rather than inserted.
Ex. If some deck named 'Deck2' is inserted, then it should be added to form
{
id: "a",
deck_list: [{
name: 'Deck1',
job: 'mage',
cards: []
},
{
name: 'Deck2',
job: 'mage',
cards: []
}],
match: []
}
But when 'Deck1' is added, then old 'Deck1' should be replaced with newer 'Deck1'.
You probably want to make deck_list an object rather than an array, and map from the name of the deck to its job/cards. Then you can use update normally, and it will create the deck if it doesn't exist or update it if it does.