I want to use Multiselect (from multiselect-react-dropdown) component to get multiple values from a user. For this I've written the below code
<Multiselect
options={
allItemsData && allItemsData.map((item) => item.name)
}
onChange={(value) => console.log(value)}
/>
allItemsData is an array of objects in which each object consist of id, name, price, etc. The code just creates an empty number of options in the list that is equal to the size of an array. When I click the on it, or try to select/deselect it just shows the following error:
Cannot read properties of undefined (reading 'toLowerCase')
I just don't know what is undefined here. allItems array is not empty. I'm beginner to React. What is causing this error?
In multiselect react drop down options are expected as an array of object with id and name in it.
check the library documentation in npm or github
{
options: [{name: 'Option 1️⃣', id: 1},{name: 'Option 2️⃣', id: 2}]
};
in your case try this
options={allItemsData && allItemsData.map((item) => {name: item.name, id:item.id})
if you dont have id in your items try adding index or name itself
Related
I have data in App.vue that looks like this:
data() {
return {
information: {
item1: 'item 1 string',
item2: 'item 2 string',
item3: 'item 3 string'
}
}
},
I want to pass this info into a component like this:
<ComponentName prop="something-else" info=this.data.information.item1 />
But I don't get the data, I just get the string..?
Passing data to components in vue.js
SO I go:
<ComponentName prop="something-else" :info=this.data.information.item1>
But my whole page goes blank
Vue JS 3: How to pass data from one component to another other?
I'm a little bit confused by this one but then I found
Passing the data into component in vuejs
So I added basically like, a static method
<ComponentName prop="something-else" information=information.item1>
methods: {
information() {
this.information.item1 = information.item1
}
},
But I get an error about duplicated key and a no-undef error.
How do you pass data from vue into a component?
You should access directly the data returned from the data option and bind it to the prop :
<ComponentName :info="information.item1">
When writing with HTML, you never write data, this, methods or computed. You just write the data, method, computed property directly etc.
<ComponentName :info=information.item1 />
You get an duplicate key error because your method information already exist as an property key inside your data
With : you bind something. Without : you just pass an string
I mean, by just looking at the examples you should figure it out that they never use data or this inside the template
https://vuejs.org/guide/essentials/forms.html
I think what you need to do is register the props.
For Example.
The Vue component
<componentName :lists="lists"></componentName>
Then in your component register the props
props: ['lists'],
data() {
return {
information: {
item1: 'item 1 string',
item2: 'item 2 string',
item3: 'item 3 string'
}
}
}
Let me know if this helps you.
Im trying to map the list of my expense array elements and after using the map() method Im getting the error "Uncaught TypeError: Cannot read properties of undefined (reading 'toLocaleString')".
I couldn't find the issue please check the code link - https://github.com/mohitdevelops/react-lessons/tree/main/toLocalString-issue
Please help me out, I'm stuck in this error for days.
And checkout the screenshot here 👇
You're using the wrong object keys in your expenseData object in the ExpenseForm component. And so the date will "always" be undefined thus failed during the date conversion in your ExpenseDate component. To fix this, you just need to supply the correct object:
From this:
const expenseData = {
inputValue: enteredValue,
inputAmount: enteredAmount,
inputDate: new Date(enteredDate),
};
To this:
const expenseData = {
id: "e5", // You will need to figure out a way to create a dynamic ID here :)
title: enteredValue,
amount: enteredAmount,
date: new Date(enteredDate),
};
I'm looking to figure out what I'm doing wrong here however i'm not entirely sure. I am looking to pass down an object from the site, which is 'colour' as per the database (Australian).
I then want to map this array to the front end to only display these colours as such. E.g this array has ["White", "Black", "Red"] etc.
Initially I have a useEffect function, as below:
useEffect(() => {
const getProduct = async () => {
try {
const res = await publicRequest.get("/products/find/" + id);
setProduct(res.data);
} catch {}
};
getProduct();
}, [id]);
From this, I am attempting to map:
<Filter>
<FilterTitle>Colour</FilterTitle>
{product.color.map((c)=> (
<FilterColour color={c} key={c}/>
))}
</Filter>
But I receive the classic:
TypeError: Cannot read properties of undefined (reading 'map')
I've tried both colour, color etc, but cannot resolve? Any ideas Stack!
Before it calls setProduct your default value should have color as its property and it needs to be an array. If you're facing this after setProduct is called just check res.data to see if you're getting data in the format you expected.
Since the data you are attempting to render is the result of an asynchronous function, product is still not populated during the initial render, it gets populated only after.
What we usually do in React to circumvent this, is adding conditional statements.
This should do the trick -
<Filter>
<FilterTitle>Colour</FilterTitle>
{product.color && product.color.map((c)=> (
<FilterColour color={c} key={c}/>
))}
</Filter>
You need to make sure the attribute that you want to access keeps the same data structure. If not, you need to check whether it is undefined or not.
Solution 1:
Keep the same data structure. The useState hook should be initialized as:
const [product, setProduct] = useState({color: []})
// or populate other attributes in the initial state.
Solution 2:
Check if the data exists:
{product.color && product.color.map((c)=> (
<FilterColour color={c} key={c}/>
))}
Hi guys i have a specific problem with React with Hooks. Actually I have the following states:
name (its a html input)
brand (its a html input)
color (its a hmtl input)
variation (its a JS array)
But with the difference that 'variation' is an array of objects with the following structure:
variation: [{
id: '123',
name: 'variation 1',
state: 'activate'
},{
id: '345',
name: 'variation 2',
state: 'deactivate'
}]
The variation is a state of another Component and the variables, name and state are another input in the Component but I don't have any idea to handling with this (apply CRUD operations). I try to find a better solution but I'm compelled to use this structure.
Store variation in the parent component, and create a method to update it, based on the index. For example:
updateVariationName = (index, name) => {
setVariation(prev => {
//first, create a copy of the previous state
//You should never modify the state directly
let nuevo = [...prev];
//Update the name
nuevo[index].name = name;
return nuevo;
});
}
Map the variation array to create the input fields (and any other components needed), to use the function, for example:
variation.map( v, index ) => {
<input onChange={ e=> updateVariationName(index, e.target.value) } />
}
You can create other functions to update the other properties.
There is a similar example here. It shows how to deal with your specific problem and some more complex tasks with forms.
I'm currently stuck with an issue I've yet to solve. Im doing an application using React.JS. Currently i have a component called SortableList which i pass data to with a prop called data, this is what the structure looks like:
(Array) Students
(Object) Name: 'Not Assigned', Items: (Array) - This is an array containing multiple objects and each of them contains a user.
(Object) Name: 'Assigned', Items: (Array) - Empty
In the SortableList component i iterate the data prop sent with the data above, it outputs two lists and one of them is empty (The assigned) and the other is filled with users (The not assigned one). I can re-arrange in the not assigned one and it spits out the updated object for each change that is happening. The main problem for me is telling ReactSortable that it can move an user object to the other list array in the object "Assigned".
This is what my iteration looks like inside the SortableList component:
return(
this.props.data.map( (list, i) => {
return (<div style={{'marginBottom': '1em'}}><h3>{list.name}</h3><div className="list-container">
{ list.items.map( (item, i) => {
return (
<SortableListItem
key={i}
updateState={this.updateState}
items={list.items}
draggingIndex={this.state.draggingIndex}
sortId={i}
outline="list"
childProps={childProps} className="list-item">
{item.firstName} {item.lastName}
</SortableListItem>
);
}) }
<div style={{'clear': 'both', 'width': '100%'}}></div>
</div></div>);
})
);
In this example i named each user item, would probably be easier to understand if it was named user, since that's what it is.
I hope this question makes any sense and that I have provided sufficient information. Thanks for the help, in advance.
I got the functionality I wanted with react-dnd and react-dnd-touch-backend, react-dnd is a much more powerful package but if you're looking for a simple way to re-arrange one list react sortable is a good choice.
Many thanks to #Prabhjot Rai for the suggestion.