Category: React

Sometimes, we want to handle visibility=hidden with React.

In this article, we’ll look at how to handle visibility=hidden with React.

How to handle visibility=hidden with React?

To handle visibility=hidden with React, we can set the visibility CSS property in the style prop object.

For instance, we write:

import React, { useState } from "react";

export default function App() {
  const [show, setShow] = useState(true);

  return (
    <div>
      <button onClick={() => setShow((s) => !s)}>toggle</button>
      <div style={{ visibility: show ? "visible" : "hidden" }}>hello world</div>
    </div>
  );
}

to add a div that can be toggled by the button.

We define the show state with the useState hook.

Then we add a button that has the onClick prop set to a function that calls setShow to toggle the value of show.

Next, we add a div that has the style prop with the visibility property set to 'visible' if show is true and 'hidden' otherwise.

As a result, when we click on toggle, we’ll see the div being toggled on and off.

Conclusion

To handle visibility=hidden with React, we can set the visibility CSS property in the style prop object.

Sometimes, we want to reset a React element.

In this article, we’ll look at how to reset a React element.

How to reset a React element?

To reset a React element, we can change the value of the key prop of the element.

For instance, we write:

import React, { useState } from "react";

export default function App() {
  const [key, setKey] = useState();

  return (
    <div>
      <button onClick={() => setKey(Math.random())}>reload</button>
      <div key={key}>{Math.random()}</div>
    </div>
  );
}

We define the key state with the useState hook.

Then we add a button with the onClick prop set to a function that calls setKey with a random number.

Next, we assign the key state as the value of the key prop.

As a result, we should see the random number in the div change when we click on the button.

Conclusion

To reset a React element, we can change the value of the key prop of the element.

Sometimes, we want to fix the can not submit form with react-bootstrap issue.

In this article, we’ll look at how to fix the can not submit form with react-bootstrap issue.

How to fix the can not submit form with react-bootstrap issue?

To fix the can not submit form with react-bootstrap issue, we should wrap the form element around the Bootstrap form components.

Then we set the onSubmit prop of the form element to a function that calls event.preventDefault to prevent the default server-side submission behavior.

For instance, we write:

import React from "react";
import { FormGroup, Button, FormControl } from "react-bootstrap";

export default function App() {
  const gotEmail = (event) => {
    event.preventDefault();
    console.log("got email");
  };

  return (
    <div>
      <form onSubmit={gotEmail}>
        <FormGroup role="form">
          <FormControl type="text" className="form-control" />
          <Button
            className="btn btn-primary btn-large centerButton"
            type="submit"
          >
            Send
          </Button>
        </FormGroup>
      </form>
    </div>
  );
}

We wrap the form element around the FormGroup element to create the form.

Then we set the onSubmit prop to the gotEmail function.

In gotEmail, we call event.preventDefault to prevent the default server-side form submission behavior.

As a result, when we click Send, we see 'got email' logged instead of submitting the form on server-side and reloading the page.

Conclusion

To fix the can not submit form with react-bootstrap issue, we should wrap the form element around the Bootstrap form components.

Then we set the onSubmit prop of the form element to a function that calls event.preventDefault to prevent the default server-side submission behavior.

Sometimes, we want to insert into React’s state array with useState.

In this article, we’ll look at how to insert into React’s state array with useState.

How to insert into React’s state array with useState?

To insert into React’s state array with useState, we call the state setter function with a callback that returns the new state array with the value we want inserted.

For instance, we write:

import React, { useState } from "react";

export default function App() {
  const [myArray, setMyArray] = useState([]);

  const insert = () => {
    setMyArray((myArray) => [...myArray, Math.random()]);
  };

  return (
    <div>
      <button onClick={insert}>insert</button>
      {myArray.map((a) => (
        <p key={a}>{a}</p>
      ))}
    </div>
  );
}

to define the myArray state array with useState set to an empty array as its initial value.

Then we define the insert function that calls setMyArray with a callback that returns the new array with a random number attached at the end of it.

Next, we add a button that has the onClick prop set to insert.

And finally we render the myArray values with myArray.map.

As a result, when we click insert, we should see new numbers displayed.

Conclusion

To insert into React’s state array with useState, we call the state setter function with a callback that returns the new state array with the value we want inserted.

Sometimes, we want to clear browser cache in React.

In this article, we’ll look at how to clear browser cache in React.

How to clear browser cache in React?

To clear browser cache in React, we can get the cache data from the window.caches property.

Then we call then with a callback that calls delete to clear the cache. For instance, we weite:

import React, { useEffect } from "react";

export default function App() {
  useEffect(() => {
    if ("caches" in window) {
      caches.keys().then((names) => {
        names.forEach((name) => {
          caches.delete(name);
        });
      });
    }
  }, []);

  return <div>hello world</div>;
}

We call caches.keys to get the cache object.

Then we call then with a callback that takes the names array with the which is set to the cache keys array.

Next, we call names.forEach with a callback that calls caches.delete with name to delete the cache entry.

Conclusion

To clear browser cache in React, we can get the cache data from the window.caches property.

Then we call then with a callback that calls delete to clear the cache.