Create a twitch clone using React -7

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

We will create the StreamShow component first. So, whenever the user clicks on a stream, it will show one.

So, first open App.js as we have to update our routes. The things in bold are changed. We use a Switch to wrap all routes because to solve the same type of route in StreamCreate and StreamShow.

import React from 'react';
import { Router, Route, Switch } from 'react-router-dom';



const App = () => {
return (
<div>
<Router history={history}>
<div>
<Header />
<Switch>
<Route path="/" exact component={StreamList} />
<Route path="/streams/create" exact component={StreamCreate} />
<Route path="/streams/edit/:id" exact component={StreamEdit} />
<Route path="/streams/delete/:id" exact component={StreamDelete} />
<Route path="/streams/:id" exact component={StreamShow} />
</Switch>
</div>
</Router>
</div>
);
}

export default App;

Next, we will update our StreamList.js file’s renderList(). Here, we add a link to title of the stream.

renderList() {
return this.props.streams.map(stream => {
return (
<div className="item" key={stream.id}>
<div className="content">
<Link to={`/streams/${stream.id}`}>{stream.title}</Link>
</div>
<div className="description">{stream.description}</div>
{this.renderAdmin(stream)}
<hr />
</div>
)
})
}

So, now in homepage you have a Link on click of which will take to our StreamShow page.

Title Link

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

Hope you enjoyed building the Twitch clone with me. See you soon, till my next adventure.

You can find code till this point here.

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