- Jon Christie

---

Welcome to the 2nd installation of the 5-Part React Coding Practice Series. Here we will cover two more very popular React coding interview questions.

1) Creating a reusable modal component for ReactJS

2) Building a dynamic navigation menu with Tailwind CSS styling.

LET'S GO!

Creating a reusable modal component for ReactJS

Why reusable components in ReactJS? It allows us to create a component that can be used in multiple places in our application without having to rewrite the same code over and over again.

This is a very powerful concept in ReactJS and is one of the reasons why it is so popular.

The main characteristics of reusable components include:

• “isolated” from the rest of our application

• can be easily moved around without breaking our application.

import React from 'react';
import ReactDOM from 'react-dom';

const Modal = (props) => {
  return ReactDOM.createPortal(
    <div onClick={props.onDismiss} className="ui dimmer modals visible active">
      <div onClick={(e) => e.stopPropagation()} className="ui standard modal visible active">
        <div className="header">{props.title}</div>
        <div className="content">{props.content}</div>
        <div className="actions">{props.actions}</div>
      </div>
    </div>,
    document.querySelector('#modal')
  );
};

export default Modal;

In order to implement this reusable modal component, we will need to install the react-dom package and import it into our project

For example, take a look at this code snippet from the App.js file that implements the modal component with a trigger button to open and close the modal using state:

import React, { useState } from 'react';
import Modal from './Modal';

const App = () => {
  const [showModal, setShowModal] = useState(false);

  const showModalHandler = () => {
    setShowModal(true);
  }

  const hideModalHandler = () => {
    setShowModal(false);
  }

  return (
    <div>
      <button onClick={showModalHandler}>Show Modal</button>
      {showModal && <Modal onDismiss={hideModalHandler} title="Modal Title" content="Modal Content" actions={<button onClick={hideModalHandler}>Close Modal</button>} />}
    </div>
  );

}

export default App;

Building a Dynamic Nav menu with TailwindCSS

In order to do this, we will need to install the react-router-dom package and utilize the Link component.

Notice the TailwindCSS class names providing even separation between menu items, padding, and hover effects. Click on each class name to see the documentation 👍

justify-between, items-center, px-4, py-3, text-sm, font-medium, text-gray-500, hover:text-gray-900, hover:bg-gray-50, rounded-md

import React from 'react';
import { Link } from 'react-router-dom';

const Header = () => {
  return (
    <div className="justify-between, items-center, px-4, py-3, text-sm, font-medium, text-gray-500, hover:text-gray-900, hover:bg-gray-50, rounded-md">
      <Link to="/" className="item">
        Accordion
      </Link>
      <Link to="/list" className="item">
        Search
      </Link>
      <Link to="/dropdown" className="item">
        Dropdown
      </Link>
      <Link to="/translate" className="item">
        Translate
      </Link>
    </div>
  );
};

export default Header;

Link is imported from the react-router-dom to create a dynamic navigation menu.

• Link component to create a link to the different pages

• className to style the menu with Tailwind CSS

• The ‘to’ attribute creates a link to the different pages

Test these out in your own setting and see if you can add some more features like responsiveness, reusability, color schemes, and more. Coming soon: Dark mode!!! It's easy as π!

Thanks for reading. Please check out my other articles and follow me for more!!!

Jon Christie

jonchristie.net