In a component, I have a Calendar using react-calendar on the left side. I can add reminders via a form where I can select a date. These two dates are different displayed: the date from the react-calender is shown in the format 18/08/2021 while the date from the reminder form is shown as 2021-08-18.
How can I compare these two values so that only reminders are shown on the specific date when clicking on a calendar date? I tried to parse (which seems to be not recommended by MDN) but the output numbers are different. I tried to compare with valueOf() but the output is false.
EDIT:
I was able to compare both dates and the output is true. Therefore, I set a new prop to reminder "show" with the state of "false". But when I try to return this prop as true when both dates are the same, the prop does not change. (changing it manually with dev tools, the show/hide function works now perfectly fine).
In my index.js file, I created an onChange function when clicking a specific date in the calendar:
const onCalendarChange = (date) => {
setDate(date);
reminders.map((item) => {
const itemDate = item.date
.toLocaleString()
.slice(0, 10)
.replace(/\D/g, "");
const calDate = date.toLocaleDateString().split("/").reverse().join("");
console.log(itemDate === calDate);
if (itemDate === calDate) {
return {
...item,
show: true,
};
}
return item;
});
};
I also tried it with the filter() but this does not seem to work either. The reminders are shown the whole time.
const onCalendarChange = (date) => {
setDate(date);
setReminders(
reminders.filter(
(item) =>
item.date.toLocaleString().slice(0, 10).replace(/\D/g, "") ===
date.toLocaleDateString().split("/").reverse().join("")
)
);
};
1. First code snippet:
The first code snippet may not be working because you forgot to store the new array in a variable and reset reminders on the state using it (which you did correctly in the second code snippet).
So, the first code snippet should be something like this:
const updatedReminders = reminders.map((item) => {
// logic here
});
setReminders(updatedReminders);
2. Second Code Snippet:
Not sure why this isn't working, YET. I'll let you know when I have an update.
In the meantime, see if my suggestion for the first code snippet does the trick?
Related
I have an input field that should accept multiple inputs from options that are already set. - This input field needs to appear like tag input fields so I used the React-select library:
The set options are going to come from a react-bootstrap-table so I disabled the built-in dropdown in the react-select input field.
The problem is that I cannot remove the selected items by deselecting the row from the react-bootstrap-table.
I think I am doing something wrong on how I'm passing the values between the input field and the table but can't figure it out.
Here is the codesandbox
The problem is you try to compare two Objects, however there is no generic means to determine that an object is equal to another.
You could JSON.stringify them both and compare but thats not reliable way.
Instead, you can filter the array by object key, lets say label.
In this case, your function should look like this:
const setSelected = (row: any, isSelect: any, rowIndex: any, e: any) => {
if (isSelect) {
setSelectProducts([...selectedProducts, row]);
} else {
const newArray = selectedProducts.filter(
(item) => item.label !== row.label
);
setSelectProducts(newArray);
}
};
Here is codesandbox to preview
#Edit
If you wanna do something onClear
onChange={(selectedOption, triggeredAction) => {
if (triggeredAction.action === 'clear') {
// Clear happened
}
I've three buttons on the page, and when clicking on any button i want to get that selected value from the store filtered by id(done in reducer). I'm trying to use redux with mapStateToProps and mapDispatchToProps pattern, but looks like when i try to access the current selected value from the store after clicking on any button, it doesn't reflect the correct value in the console. Is this not how "this.props.anyPropValue" be used? Can you help clarify what's wrong in my example?
First time it prints default value when clicking any button, clicking again prints the previously clicked button value not the current one.
Here is a sandbox link to the simple app i created for the above
sandbox link of the code
Most of the code that you have wrote is correct, If you are expecting to see the updated output right after calling the action, it won't work
onGetCountryById(id) {
this.props.fetchCountryById(id);
console.log(this.props.country); // This will gives you the current country (We just update the state, but still that value didn't update the component)
}
try to print the value of the country in the html as below and you will see it's getting updated
{this.props.country === null ? "default" : this.props.country.name}
in the reducer you might need to do this change
case CountryActions.FETCH_COUNTRY_BY_ID:
return {
...state,
country: state.countries.find((item) => item.id === action.id) // use find instead of filter
};
and set the initial value of the country set to null
const initCountriesState = {
country: null,
countries: [
....
]
};
here is the updated sandbox
I was working on a electron-react project for epub file. Right now, I am planning to make the app capable of selecting text field and highlight it.
To achieve it, I was trying to use web's Window.getSelection api. However, there are some really weird things come up like in this.
In short, I am unable to capture the Selection object. It seems like even if I log the Selection object, this object could somehow jump to something else. Also, I cannot even serialize the Selection object with JSON.stringfy. This is super surprising, and this is my first time seeing something like this (I will get empty object to stringfy the Selection object).
So how to use Window.getSelection properly under react-electron environment? Or this api will not work well for text content which is generated by react's dangerouslySetInnerHTML?
Looks like the window.getSelection api needs to toString the selected object.
const getSelectionHandler = () => {
const selection = window.getSelection();
console.log("Got selection", selection.toString());
};
Super simple textarea and button to get selection react demo
this solution might help someone, catch last selection
const selection = useRef('');
const handleSelection = () => {
const text = document.getSelection().toString();
if (text) {
selection.current = text;
}
}
useEffect(() => {
document.addEventListener('selectionchange', handleSelection);
return () => {
document.removeEventListener('selectionchange', handleSelection);
};
});
I am new to reactjs and want to know if there is a way to check if the state value is datetime in reactjs.
What i am trying to do?
On clicking the checkbox i set its state to current date and time. But its value is not updating meaning after clicking submit button it doesnt update the checkbox....the checkbox isnot checked even though user checks it. How do i check if the value of the variable is datetime. Below is the code...Could someone help me with this. Thanks.
class Name extends React.PureComponent {
constructor(props) {
super(props);
const topic = props.topic;
this.state = {
checkbox_checked: some_value ? some_value.property : null,
};
}
handle_checkbox_change = (event) => {
this.setState({'checbox_checked': (event.target.checked === true ? timeUtils.date_to_iso_format(new Date()) : null)}, () => console.log('checkbox status:', this.state.checkbox_checked));
};
render () {
return (
<input
name="checkbox_name"
checked={state.resolved}
onChange={this.handle_checkbox_change}
type="checkbox"/>
<span>Checkbox</span>
<button type="submit">
</button>);}}
There is so many functions that helps you check if the value is a date that you can find them by a simple search. take a look here for example of some of these functions:
Check if a string is a date value
Also, you can make some changes to the code:
this.state = {
// Checkbox is either false or true so edit this according to your some_value
checkbox_checked: some_value ? true: false,
// And the date if it's checked. it can be null at initial state.
// You can set a date if you have a date.
checkbox_checked_date: null
};
And whenever your checkbox changed or user clicked on it, it means that the state should change.
So:
handle_checkbox_change = (event) => {
// checbox_checked will change whenever user clicked on checkbox
this.setState({checbox_checked: !this.state.checbox_checked, checkbox_checked_date: timeUtils.date_to_iso_format(new Date())})
};
Now everytime user clicked on checkbox your code will change the state of the checbox_checked. Then when your submiting and sending your data to some API or anywhere you might need them, just check if checbox_checked is true and if it was, then check for checkbox_checked_date, if it was null, it means that checkbox was already set to true (Your initial state - if you can't set any date for initial state otherwise you should check if the date is too behind meaning it was already checked) and if checkbox_checked_date wasn't null, it means that user changed the checkbox to true in the date you have as checkbox_checked_date and you can be sure that is for sure a date and treat it accordingly.
This way your code is way cleaner and has more features available easily for future development.
I downloaded react-native-material-calandarview inside my project.
They just give some piece of code to get calendar.
https://github.com/NuclleaR/react-native-material-calendarview.
I used that inside my render().
selectedDates={this.state.dates}......{this.state.dates} it gives undefined.
I need the selected dates array,but i cant get that.
where i get the selected dates???
Help me ASAP.Thanks in advance
The calendar expose you an event function onDateChange, you have just to setState in this event like that:
<Calendar
selectedDates={this.state.dates}
onDateChange={data => {
// Add the data to your state here
// for example:
this.setState(state => { dates: state.dates.push(data.date) });
}}
/>