Category: React Answers

Sometimes, we want to create a dynamic drop down list with React Bootstrap.

In this article, we’ll look at how to create a dynamic drop down list with React Bootstrap.

How to create a dynamic drop down list with React Bootstrap?

To create a dynamic drop down list with React Bootstrap, we can call the option array’s map method to return the option element for each option in the array.

For instance, we write:

import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Form } from "react-bootstrap";

const options = [
  { name: "One", id: 1 },
  { name: "Two", id: 2 },
  { name: "Three", id: 3 },
  { name: "four", id: 4 }
];

export default function App() {
  const [val, setVal] = useState();
  console.log(val);

  return (
    <Form.Select value={val} onChange={(e) => setVal(e.target.value)}>
      {options.map((o) => {
        const { name, id } = o;
        return <option value={id}>{name}</option>;
      })}
    </Form.Select>
  );
}

We call options.map with a callback that returns the option element by setting the value prop to id and the text content to name.

Now we should see the options One, Two, Three and Four available in the drop down.

We also set the value prop of Form.Select to val and the onChange prop to a function that calls setVal with e.target.value to set val to the selected option’s value attribute value.

Conclusion

To create a dynamic drop down list with React Bootstrap, we can call the option array’s map method to return the option element for each option in the array.

Sometimes, we want to change the style of a button on click with React.

In this article, we’ll look at how to change the style of a button on click with React.

How to change the style of a button on click with React?

To change the style of a button on click with React, we can set the className prop to an object with styles controlled by states.

For instance, we write:

import React, { useState } from "react";

export default function App() {
  const [cls, setCls] = useState("green");

  return (
    <>
      <style>{`
        .red {color: red}
        .green {color: green}
      `}</style>
      <button
        className={cls}
        onClick={() => setCls((cls) => (cls === "red" ? "green" : "red"))}
      >
        Button
      </button>
    </>
  );
}

We have the red and green classes with the color CSS property set to red and green respectively.

Then we set the className prop to the cls state to let us control which class to set the button to.

Next, we set the onClick prop to a function that calls setCls with a function that returns the class we want to set for the button.

As a result, when we click the button, we see the text of the button toggle between green and red.

Conclusion

To change the style of a button on click with React, we can set the className prop to an object with styles controlled by states.

Sometimes, we want to set z-index on a React component.

In this article, we’ll look at how to set z-index on a React component.

How to set z-index on a React component?

To set z-index on a React component, we set the position and zIndex properties of a component.

For instance, we write:

import React from "react";

export default function App() {
  return (
    <>
      <div style={{ position: "relative", zIndex: "1" }}>bottom</div>
      <div style={{ position: "relative", zIndex: "2" }}>top</div>{" "}
    </>
  );
}

We set the position and zIndex properties to set the z-index of the divs.

The z-index property are enforced if position is set to absolute, relative, sticky or fixed.

Conclusion

To set z-index on a React component, we set the position and zIndex properties of a component.

Sometimes, we want to add links to a React Router route with React-Bootstrap.

In this article, we’ll look at how to add links to a React Router route with React-Bootstrap.

How to add links to a React Router route with React-Bootstrap?

To add links to a React Router route with React-Bootstrap, we can use the Nav.Link component.

For instance, we write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Nav, Navbar } from "react-bootstrap";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  NavLink
} from "react-router-dom";

const Foo = () => {
  return <p>foo</p>;
};

const Bar = () => {
  return <p>bar</p>;
};

const Links = () => {
  return (
    <Navbar>
      <Navbar.Brand as={NavLink} to="/">
        Brand link
      </Navbar.Brand>
      <Nav>
        <Nav.Link as={NavLink} to="/" exact>
          Home
        </Nav.Link>
        <Nav.Link as={NavLink} to="/foo">
          Foo
        </Nav.Link>
        <Nav.Link as={NavLink} to="/bar">
          Bar
        </Nav.Link>
      </Nav>
    </Navbar>
  );
};

export default function App() {
  return (
    <Router>
      <div>
        <Links />
        <Switch>
          <Route path="/foo" children={<Foo />} />
          <Route path="/bar" children={<Bar />} />
        </Switch>
      </div>
    </Router>
  );
}

to add links to the /foo and /bar routes with Nav.Link.

We set the as prop to the React Bootstrap’s NavLink component so that the link is rendered by React Bootstrap and it links to the route defined with React Router.

We set the to prop of each Nav.Link to the route we want to load when we click on the link.

Therefore, we should see ‘foo’ and ‘bar’ when we click on Foo and Bar respectively.

Conclusion

To add links to a React Router route with React-Bootstrap, we can use the Nav.Link component.

Sometimes, we want to listen to keypress for document in React.

In this article, we’ll look at how to listen to keypress for document in React.

How to listen to keypress for document in React?

To listen to keypress for document in React, we can call document.addEventListener in the useEffect hook callback.

For instance, we write:

import React, { useEffect } from "react";

export default function App() {
  const handleKeyDown = (e) => {
    console.log(e.key);
  };

  useEffect(() => {
    document.addEventListener("keydown", handleKeyDown);

    return () => document.removeEventListener("keydown", handleKeyDown);
  }, []);

  return <div></div>;
}

In the useEffect callback, we call document.addEventListener with 'keydown' and the handleKeyDown function.

Next, we return a function that calls document.removeEventListener with the same arguments to remove the event listener when App is unmounted.

In handleKeyDown, we get the key that’s pressed with the e.key property.

Now when we’re focused on the window and the press keys on the keyboard, we should see the key value logged.

Conclusion

To listen to keypress for document in React, we can call document.addEventListener in the useEffect hook callback.