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.
Related
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}`)
));
I am trying to update a state array after accepting the input from Form. State already has events object in it with data and I want to accept data from the form and append to the existing list. I'm able to do console log of the newEvents (data from form in another component), but using the spread operator unable to update the existing state by appending it.
//getting newEvent object from form in another component. // events is
an array in state which has data //priniting the existing array
without appending newEvent //printing data from form (newEvent)
properly
testmethodfornow = (newEvent) => (
{ ...this.state.events, events: [newEvent, ...this.state.events] },
console.log(this.state.events),
console.log(newEvent)
)
I want newEvent to be added to event :( Can anyone please help ?
NewEvent structure:
const newEvent = { IdText: uuid(), EventName, Venue, Time };
events array structure in state:
state = {
flag: false,
title: "State Check",
events: [
{
IdText: '1',
EventName: 'New Year Party 2022',
Venue: 'The Social',
Time: '8:00 PM- 1:00AM',
Date: ''
},
{
IdText: '2',
EventName: 'StandUp Comedy',
Venue: 'ShilpaRamam',
Time: '8:00 PM- 1:00AM',
Date: ''
}]
}
If you are using class components, use setState to update the state. In this case events is a field of the state. So you can spread rest of the state instead of state.events.
addNewEvent(){
setState({...this.state, events: [newEvent, ...this.state.events]})
}
Is it possible to have more than one localStorage.getItem in state?
Right now I have this:
const [list, useList] = useState(
JSON.parse(localStorage.getItem("dictionary")) || [] //tasks in my to-do
);
and I should also keep in this state my subtasks, contained in a task, with this structure:
- task {
- id
- body
- subtasks
[{
- id
- body
}]
}
Can I save also the subtasks in local storage and access them with getItem?
These are what I want to use to get my subtasks:
JSON.parse(localStorage.getItem("domain")) || []
JSON.parse(localStorage.getItem("range")) || []
Yes, you can have more than one array of values in local storage. You need to set the item before you can access it though, you should also serialize the object or array to a string when saving it.
localStorage.setItem("dictionary", JSON.stringify([]));
localStorage.setItem("domain", JSON.stringify([]));
localStorage.setItem("range", JSON.stringify([]));
alert(JSON.parse(localStorage.getItem("dictionary")));
alert(JSON.parse(localStorage.getItem("domain")));
alert(JSON.parse(localStorage.getItem("range")));
Lucky me, I saw your other question which contains a running code snippet, you should add it here too!
From what I saw you're trying to create a tree of tasks, dictionary is a task and it can have subtasks such as domain and range, right? Then you should have a data structure like this:
singleTask = {
id: 0,
body: "task",
domain: [
{
id: 00,
body: "subtask domain 1"
},
{
id: 01,
body: "subtask domain 2"
}
],
range: [
{
id: 10,
body: "subtask range 1"
},
{
id: 11,
body: "subtask range 2"
}
]
}
When you're rendering a task as TaskListItem, you render the task.body. Then pass task.domain to a SubtaskDomain component, task.range to a SubtaskRange component.
When you submit a subtask, update the main list in App, after you do that, update local storage, you already do that, but you actually only need one set item, and it's
localStorage.setItem("dictionary", JSON.stringify(listState));
because you have everything in it!
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
},
]
I am creating an app which displays and hides UI elements on the page based on checkbox value of a 'toggler' and checkbox values of the list elements which are created from this.state.items.
The app has an initial state set as:
state = {
items: [
{
id: 1,
name: 'Water',
isComplete: false
}, {
id: 2,
name: 'Salt',
isComplete: false
}, {
id: 3,
name: 'Bread',
isComplete: false
}
],
isChecked: false,
currentItem: '',
inputMessage: 'Add Items to Shopping Basket'
}
I created the following method which filters through items and returns all of the isComplete: false, and then I set the new state with these returned items.
toggleChange = (e) => {
this.setState({isChecked: !this.state.isChecked});
if (!this.state.isChecked) {
const filtered = this.state.items.filter(isComplete);
this.setState({items: filtered})
} else {
// display previous state of this.state.items
}
}
How do I come back to the 'Previous' state when I set 'toggler' to false?
If you only need to keep the default list then keep it out of state entirely
and just keep the filtered list in the state.
This way you could always filter the original list.
You can even consider filtering in the render method itself and not keeping the filtered list in state at all.
If you need to go back before a change was made (keeping history)
you could maintain another filtered list in your state.
I am not sure what you want to do but, if you implement componentWillUpdate() (https://facebook.github.io/react/docs/react-component.html#componentwillupdate) you get access to the next state and the current state.
-nextState will be what your state is going to be, and this.state is what it is now.
You could save this.state into another variable called this.oldState before it is updated, and then refer back to it.
Nonetheless, since state doesn't keep history of itself, you might consider approaching the problem differently.