Category: React

To render curly braces as plain text in React or JSX, we can render them in a string.

For instance, we write

return (<p>{"{{}}"}</p>)

to render curly braces by putting them all in a string.

To fix the cleanup function from React useEffect being called on every render, we should add items into the array in the 2nd argument so that the callback is only called when those items are changed.

For instance, we write

useEffect(() => {
  chatAPI.subscribe(props.friend.id);

  return () => chatAPI.unsubscribe(props.friend.id);
}, [props.friend.id]);

to call useEffect to watch the props.friend.id prop value for changes.

When this changes, the callback is called.

And the we return a function in the callback cleans up when props.friend.id is changed.

To redirect in React Router v6, we add the replace prop to the Route.

For instance, we write

import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";

//...
<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/lab" element={<Lab />} />
    <Route path="*" element={<Navigate to="/" replace />} />
  </Routes>
</BrowserRouter>

to add the * route that has the replace prop added to Navigate so that we redirect to the / route.

Then Home is rendered after the redirect is done.

To pass data from one component to another in React, we pass it as a prop.

For instance, we write

<BigTextMobile data={data} />;

to pass the data state as the value of the data prop of the BigTextMobile from the parent component.

To add active class to button with React, we set the className of the button.

For instance, we write

<div>
  {buttons.map((name, index) => {
    return (
      <input
        type="button"
        className={active === name ? "active" : ""}
        value={name}
        onClick={() => someFunct(name)}
        key={name}
      />
    );
  })}
</div>

to add buttons by adding inputs with type button.

Then we apply the active class if the active value equals name.

When do something with name when we click the button