What is the best way to update the value of a preact signal from a different component?

export const clicked = signal(false);


    const handleClickDay = (date) => {
        const day = date.getDate().toString().padStart(2,'0')
        const month = (date.getMonth()+1).toString().padStart(2,'0')
        const year = date.getYear().toString().padStart(2,'0')
        clickedDate.value = `${day}/${month}/${year}`;
        console.log(clickedDate.value);
        clicked.value = true;
    }

The imported value in another component needs to be changed from true to false.

I attempted to modify it directly, but encountered an error:

{clicked.value = false}

The following error message appeared:

Cannot update a component (CalendarBase) while rendering a different component (MiniTodo). To locate the bad setState() call inside MiniTodo, follow the stack trace as described 

Answer №1

Finally got it!


    const clickHandler = () =>{
            effect(() => clicked.value = false)
        }

By implementing this code snippet with a button, the application's re-rendering frequency was significantly reduced.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Receive Real-Time Notifications -> Update Title Using an Array Retrieved from a JSON File

I've been working on updating a live chart every 5 seconds with new data from the database. While I could easily update the information, I encountered a problem when trying to set a path within the chart options for tooltips callbacks afterTitle. Spec ...

What is the reason for all the buttons activating the same component instead of triggering separate components for each button?

I am facing an issue with my parent component that has 3 buttons and 3 children components. Each button is supposed to open a specific child component, but currently all the buttons are opening the same child component when clicked. The children components ...

After developing a React application to fetch data from my own API, I encountered the following error message: "TypeError: video.map is not a function". See the code snippet below:

import React, {useEffect, useState} from "react"; import Axios from "axios"; const VideoPage = () => { const [video, setVideo] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { const fetchVideoData = async() => ...

How can I efficiently extract specific data from JSON using AngularJs?

In my array (_users), there are JSON objects. { "User": { "userid":"19571", "status":"7", "active":"1", "lastlogin":"1339759025307", "Stats": [ { "active":"1", "catid":"10918", "typeid":"71", ...

The enigmatic error codes encountered with npm and node

I'm currently working through the React Native tutorial provided by Facebook (https://facebook.github.io/react-native/docs/tutorial.html#hello-world), but I am facing issues with installing the react-native-cli. Can anyone assist in deciphering the er ...

Loading templates (partials) in Angular.js on the fly

Is there a way to dynamically load templates into an Angular app based on a parameter within a ng-foreach loop? <body ng-app="MyApp" ng-controller="ExampleController as example"> <div ng-repeat="item in example.items" class="someClass" ng-swi ...

AngularJS: splitting the parent <div> into multiple sections every nth element

I have an array of strings in Javascript and I am attempting to use AngularJS to create nested <div> elements. var arr = ["abc", "def", "ghi", "jkl", "mno", "pqr", "stu"]; My goal is to group every 3 elements together like so. <div class="pare ...

React Context Matters: Troubles Unleashed

I've been facing some difficulties with passing a value from one file to another. The problem seems to be related to implementing context, but I can't seem to figure out where I went wrong! import React from 'react' const Mycontext = ...

When directed to a different page, Fetch does not activate

Having trouble getting the fetch function to run more than once in my application. It works the first time, loading the page with received data, but when I navigate to a new URL without refreshing the page, nothing changes - not even the state. The same is ...

Simulating an API request using Vue and Jest/Vue test utils

Utilizing Vue for the frontend and Python/Django for the backend, I aim to create tests that verify the functionality of my API calls. However, I am encountering difficulties when attempting to mock out the Axios calls. I suspect there might be an issue w ...

JavaScript Functions for Beginners

I'm currently facing some challenges with transferring the scripts and HTML content from the calendar on refdesk.com. My task involves moving the JavaScript to a separate stylesheet and utilizing those functions to replicate the calendar on an HTML pa ...

I am looking to implement a feature that will disable unchecked checkboxes based on certain conditions in a

Upon selection of an option from a dataset, an API call is triggered. The API response includes an object with a nested array, whose values are listed as checkboxes. Additionally, the API returns a key named choose(const name primaryMax) indicating the max ...

State in React Native Firebase is coming back as undefined

Despite trying various approaches, I am still facing the issue of the state being undefined in my code. I've experimented with arrow functions and tried binding 'this' inside the onChange event, but nothing seems to be fixing the problem. Ca ...

Challenges with removing jwt token cookie in Express

//token creation res.cookie('jwt', token, { httpOnly: true, maxAge : 60 * 60 * 24}); //logout and destroying the token exports.logout = (req, res) => { res.cookie('jwt', "token", {httpOnly:true,maxAge:1000}) //unfo ...

Having trouble sending emails using Sendgrid on Next.js form

I am currently developing a request quote form in Next.js and utilizing SendGrid as a third-party API for handling email submissions. However, I have encountered an error that is preventing me from successfully linking the form to the email service. ...

What is the best way to display a modal box using NodeJs on the server side?

I recently created a contact page on my website where users can fill out a form. Upon submitting the form, I capture the information using a post method in my server.js file. If everything is correct, I want to display a modal box on the contact page to co ...

Using React Material UI in Typescript to enhance the theme with custom properties

Struggling to customize the default interface of material ui Theme by adding a custom background property to palette. Fortunately, I found the solution thanks to this helpful shared by deewens. declare module '@material-ui/core/styles/createPalette& ...

Gatsby Dazzling Graphic

I'm currently facing an issue with my Heroes component. const UniqueHero = styled.div` display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(to top, #1f1f21 1%, #1f1f21 1%,rgba(25, 26, 27, 0) 100%) , url(${prop ...

The tooltip feature for icon buttons within Material UI list items is not functioning properly as anticipated

Just starting out with Material UI and React, I've encountered a strange UI problem that I can't quite figure out. Hopefully someone here can help me identify what I did wrong. My Approach: I have a List in my code where each list item has butto ...

Create a unique bar chart plugin using Javascript/jQuery that allows users to drag and drop data

My current project involves developing a custom bar chart generator that must meet specific criteria: Input fields for entering data to display on the chart The ability to drag and resize bars once the chart is generated I've conducted research and ...