react router dom usehistory hook
import styled from 'styled-components'
import {useHistory} from 'react-router-dom'
import {useState , useEffect} from 'react'
function Sidebar() {
const [channel , setChannel ] = useState([])
const getConnectFirebase = ()=>{
db.collection('channels').onSnapshot((snapshot)=>{
setChannel(snapshot.docs.map((doc)=>{
return {id:doc.id , name:doc.data().name}
}))
})
}
const history = useHistory();
const goToChannel = (id)=>{
if(id)
{
history.push(`/channel/${id}`)
}
}
useEffect(()=>{
getConnectFirebase()
})
return (
<div>
<Container>
<CreateChannel>
{
channel.map((items)=>{
return (
<NamingChannel onClick={goToChannel(items.id)} >
# {items.name}
</NamingChannel>
)
} )
}
</CreateChannel>
</Container>
</div>
)
}
export default Sidebar
const Container = styled.div`
background:#350d36;
height:95.9vh;
padding-left:35px;
color:violet;
font-family: 'Courier New', Courier, monospace;
`;
const CreateChannel = styled.div`
margin-top:25px;
`;
const NamingChannel = styled.div `
padding-left:5px;
color:violet;
cursor:pointer;
:hover{
color:whitesmoke;
}
`;