Create a twitch clone using React -6

Photo by Ryan Fish on Unsplash

Welcome to Part-6 of the series. You can find part-5 here.

Let’s start where we left. We will next create our Delete component. We are going to show a modal to the delete the stream.

We will be using a React Portal for this, as creating a Modal is tricky in React.

So, go ahead and create a Modal.js file inside the components folder. Add the following code to it. We are using the method createPortal, in which the second argument is to select an id modal.

import React from 'react';
import ReactDOM from 'react-dom';
import history from '../history';
import './Modal.css';

const Modal = props => {
    return ReactDOM.createPortal(
        <div onClick={() => history.push('/')} className="modal-body">
            <div onClick={(e) => e.stopPropagation()} className="modal-main delete-modal">
                <div className="header">Delete Stream</div>
                <div className="modal-text">Are you sure you want to delete this Stream?</div>
                <div className="modal-buttons">
                    <button className="deleteBtn">Delete</button>
                    <button className="editBtn">Cancel</button>
                </div>
            </div>
        </div>,
        document.querySelector('#modal')
    );
};

export default Modal;

You can read the rest of the blog from my site. Link for the same is below.

The Web Dev

You can find code till this point here.

Check the final part of the series here.