I'm trying to create an on-click event function to render data on specific days.
The onClick function doesn't work properly and renders the data regardless of what day it is, I've tried a lot of different methods like: filter, sort, map and conditional rendering.
I'm a bit of a loss at this point.
What solution or method should I look up in order to get to my end goal?
Here's a part of my repo of where my code is being called: Github
Here's my codesandbox to spare you from details: CodeSandbox
Also here's a demo of what I'm trying to accomplish by another guy's sandbox. CodeSandbox
Thank you so much!
const OnClickDay = (event) => {
console.log("event", event);//this is selected date
// selectedValue is wrong, it is prev selected(click) date
};
onClickDay={(e) => {
OnClickDay(e);
}}
This has been solved by another person! Thanks so much for everyone's input.
For any lost souls that stumbles upon this post... here's what's been forked from a redditor! Answer
There are two approaches:
onclick, filter the events, set the event state, and map them to html
onclick, set the date state, filter and map to html at the same time
Assuming the first solution, your "event" variable is a const, its not
using useState. You'll notice the other guy's has useState for their
"game" variable.
When you call onClick, its just updating a variable to true. You need
to filter the events and update an events state variable.
Post
Related
I'm using AlpineJS and momentjs. The user can add a bunch of datetimes and those get pushed to an array. This array is rendered to the page with an x-for.
Now I want a method setTime, that changes the time of every datetime object. In theory this is pretty easy. But I figured, that AlpineJS will not catch, that something has changed and therefore not re-render the x-for.
I'm using this.dates.map(item => item.hour(10).minute(0)); in my example here: https://jsfiddle.net/suny1vj9/
Is there a way to tell AlpineJS to rerender, since I know when this needs to be rerendered?
I also thought about having the data twice. One as moment/Date object, and one as the string representation. That solves the problem too, but I feel like there has to be a prettier solution than maintaining two similar arrays and keeping them in sync.
How would you solve this problem differently?
It's a known issue with MomentJS mutability. And since any change in the object replaces the original object, Alpine.js cannot detect the change. To fix it, you will have to clone() the original object after setting the hour and minutes, so that Alpine.js can detect that the object has been changed (I mean it's a new object that time)
Also, the map() function returns the new Array, so you need to change your code like this.
function test() {
return {
dates: [
moment("2022-04-23"),
moment("2022-04-25"),
moment("2022-04-26"),
moment("2022-04-27"),
moment("2022-04-28")],
setTime() {
this.dates = this.dates.map((item) => item.hour(10).minute(0).clone())
},
}
}
This will solve your problem :)
Here is the fiddle link https://jsfiddle.net/tujfyhs2/1/
I'm trying to preselect rows in my table but the table won't refresh unless there are changes to the actual data itself. Is there a method to reinit the table that doesn't involve changing the data?
It's also completely possible that my method for approaching this requirement is wrong and there may be a better way? I've created an example sandbox here:
https://codesandbox.io/s/mock-preselected-rows-data-t36nl?file=/src/App.js
In this you can see I have a mock response from my server for determining what rows should be selected. I'm then grabbing the data to compare to see if any of the items from the mock response exist in the data and if so push them to a new obj which is then fed into the intialState for selectedRowIds
Any guidance appreciated.
Seems your work is all working. The short answer to your question.
As long as you want the user see something, in a React way, it needs to be contained in a state, or state derivative. In your case, it's a cell data wrapped in row and in a table.
So you can't avoid selecting it without touching the data. Unless you don't want user see the change.
Although the checkbox doesn't seem to be part of the original data stream, when you develop on it, you have to make it part of the data. To be honest, it's easy you make it part of the data, because by the time you want to refresh the table, ex. selecting or de-selecting, or deleting a row, you want everything refreshed. Unfortunately it's very difficult to do local refresh with a table in React. It's possible, but very difficult, because most of the design is based on either prop or context.
You can also refactor your handleSelectedRows function.
// Find row ids and compare them with our 'preSelectedTheseItems' array.
const handleSelectedRows = () => {
const preIds = preSelectTheseItems.map(item => item.collectibleId)
return data?.filter((collectibleRow, index) => preIds.includes(collectibleRow.collectibleId));
};
Example : codesandbox
I've changed an slider to parse JSON data with an start and end date to create a d3.js playback visualization.
My REPL:
https://svelte.dev/repl/69ede1e0f5a74f0c81a1213ce844b9f1 ( slider.svelte -> line 145 function: update() )
What happens is that once a value is rounded to a hour, it dispatches it. but 6-7 values round to the hour so it gets dispatched 6-7 times.
Is there a way to return the function if the hour was already dispatched?
I'm using Svelte
Regards,
Pepijn
You should be able store the already dispatched hours in an array or object and check that one before firing or handling the event. It is rather hard to show with your example because there are a lot of other things going on. If you can simplify it to the pure basics it would be easier.
I solved my problem by adding a variable named "lastDispatch", I set this to the startDate value.
in my update function I wrapped the dispatch function in this check:
if(lastDispatch.getHours() < roundMinutes(new Date(target)).getHours())
and before dispatching I overwrite the variable again
lastDispatch = roundMinutes(new Date(target));
Fiddle:
https://jsfiddle.net/fierflash/0h6uL4ek/2/
Objective:
When a re-order takes place(through Sortable), send a AJAX Request to backend to save the new positions of the tasks
Whats v-sortable?
http://am2studio.hr/blog/creating-dynamic-table-with-vue-js/
Problem
The markup is updated but the model is not updated. In this case the value of task.position remains the same when a re-order takes place.
How should the $watch look like for this(if needed)? What values should I put in?
How to solve this?
The main problem you are running into with that approach is you are trying to update the position by using an input with type="hidden". Vue's v-model does not support that input type (and unfortunately doesn't emit an error message in that case either).
Since you are just trying to update the position after the drop ends, why not just walk the array and set it afterwards like this?
that.value.forEach(function (task, index) {
task.position = index + 1;
});
Working fiddle here: https://jsfiddle.net/zuwg1dh6/1/
How can i add custom data to a TableViewRow?
I'm using createTableViewRow() to setup a TableRow which I'm then added labels and images to it, then finally putting all these TableRows in a TableView. This works fine, but the rows need to have a "date" attribute attached to them, as I'm sorted these rows by dates before they are shown in the TableView.
How would i add a "date" to these TableRows? All these are unixtimestamps.
var row = Ti.UI.createTableViewRow({height:50, _date_var: date});
it can just be attached as a property and retrieved like this
row._date_var
As an add-on to Aaron's answer, if you want to retrieve the date in a click event on the row, you can access it with
e.row._date_var
as in
tableview.addEventListener('click', function(e) {
Titanium.UI.createAlertDialog({
title:'DB Test',
message:'date: ' + e.row._date_var
}).show();
});
This should probably be a comment to Aaron's answer if someone with reputation wants to change it.
Watch out with adding custom variables to views and other Ti objects. If your variable is going to hold something more complex than a string or a number (e.g. an object, particularly a complex object), then it is possible that iOS will crash at some point.
Check out this thread for more details.
https://developer.appcelerator.com/question/122924/how-to-fix-strange-javascript-behaviour-and-crashes-on-ios