Category: React

To persist state on refresh with React, we use local storage.

For instance, we write

const Counter = () => {
  const [count, setCount] = useState(1);

  useEffect(() => {
    setCount(JSON.parse(window.sessionStorage.getItem("count")));
  }, []);

  useEffect(() => {
    window.sessionStorage.setItem("count", count);
  }, [count]);

  return (
    <div className="App">
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
};

to define the Counter component.

In it, we call setCount in the first useEffect callback to get the local storage item with key 'count' with getItem.

And we call setCount to set the count state with the returned value.

We call useEffect with an empty array to load the value on component mount.

Then we call useEffect again to watch the count value.

We call setItem to set the item with key 'count' to the current count value.

Then we add a button that calls setCount to update the count.

To download file on button click with React and JavaScript, we create a link

And then we can create a hidden link that has the blob’s object URL set as the href attribute and click on the link programmatically to download it.

For instance, we write:

import React from "react";

export default function App() {
  const downloadFile = () => {
    const element = document.createElement("a");
    element.href = url;
    element.download = "filename";
    document.body.appendChild(element);
    element.click();
  };

  return (
    <div>
      <button onClick={downloadFile}>Download txt</button>
    </div>
  );
}

to define the downloadFile function to put the 'hello world' string in a blob and download that as a text file.

In the function, we create an a element with document.createElement.

Next, we set element.href to the fil’s URL.

And we set the file name of the downloaded file by setting the element.download property.

Next, we call document.body.appendChild with the link element to attach it to the body.

Finally, we call element.click to click on the hidden link to download the file.

To fix the "Warning: validateDOMNesting(…): <div> cannot appear as a descendant of <p>. " error when developing React apps, we should make sure we don’t nest div elements within p elements.

For instance, we instead of writing:

<p>
    <div></div>
</p>

which is invalid HTML, we write:

<p></p>
<div></div>

Browsers will fix the HTML when the code is rendered, which will make React’s virtual DOM different from what’s rendered.

Sometimes, we want to get current date with React.js.

In this article, we’ll look at how to get current date with React.js.

How to get current date with React.js?

To get current date with React.js, we use the date’s toLocaleString method.

For instance, we write

const d = new Date().toLocaleString();

to create a date object and then call toLocaleString on it to return a string with the current date and time in the current locale.

Conclusion

To get current date with React.js, we use the date’s toLocaleString method.