Create a twitch clone using React -6

Image for post
Image for post
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.

You can find code till this point here.

Check the final part of the series here.

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store