Category: React

To render nested array elements in React, we can use the JavaScript array map method.

For instance, we write

list.map((item, index) => {
  return (
    <div key={index}>
      <ul>{item.value}</ul>
      {item.list.map((subitem, i) => {
        return (
          <ul>
            <li>{subitem.value}</li>
          </ul>
        );
      })}
    </div>
  );
});

to call map on list and item.list to render the values in them.

We call map with a function to render the elements we want in list and item.list.

To avoid HTML escaping of text children when calling React.createElement, we use the dangerouslySetInnerHTML prop.

For instance, we write

const Component = () => (
  <span dangerouslySetInnerHTML={{ __html: "&gt;&lt;" }} />
);

ReactDOM.render(<Component />, document.getElementById("container"));

to create the Component component that renders the "><" as raw HTML by setting it as the value of __html in the object that we set as the value of the dangerouslySetInnerHTML prop.

To add navigation with React, we install React Router.

To install it, we run

npm install react-router-dom

Then we use it by writing

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

to add the Switch component with the Route components inside.

The Route components have the route components nested inside them.

The path is set to the path that users navigate to to render the component inside.

To change the position of a React Material UI dialog, we call makeStyles to return classes with the styles we want.

For instance, we write

import React from "react";
import { makeStyles, Dialog } from "@material-ui/core";

const useStyles = makeStyles({
  dialog: {
    position: "absolute",
    left: 10,
    top: 50,
  },
});

function Example() {
  const classes = useStyles();

  return (
    <Dialog
      classes={{
        paper: classes.dialog,
      }}
      //...
    >
      //...
    </Dialog>
  );
}

to call makeStyles with an object to create the dialog class with the dialog styles inside.

Then we call useStyles returned from makeStyles to return the classes object.

And we set the paper class to the classes.dialog class.

To fix the ‘useNavigate() may be used only in the context of a component’ error in React, we put the component that uses useNavigate inside BrowserRouter.

For instance, w write

import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

to put App in BrowserRouter.

Then we write

function App() {
  const navigate = useNavigate();
  return (
    <div>
      <button onClick={() => navigate(-1)}>go back</button>
      <Nav />
      <Routes>
        <Route exact path="/" element={<Home />} />
        <Route exact path="/home" element={<Home />} />
        <Route exact path="/upcoming/:user" element={<Upcoming />} />
        <Route exact path="/record/:user" element={<Record />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </div>
  );
}

to call useNavigate in App and call navigate in the onClick handler.