How to add redirect link to onclick Material ui icon - React

Question

I am having some problems adding a function to the VideocamOutlinedIcon on line 232, in which I want to add an onclick that redirects the user to an external domain link in another tab. I tried many solutions but none of them are working. I tried using Link by react-router-dom and redirect but these didn't work either.

My code:

 import React, { useEffect, useState, useRef } from "react"; import { Avatar, IconButton } from "@material-ui/core"; import VideocamOutlinedIcon from '@material-ui/icons/VideocamOutlined'; import MoreVertIcon from "@material-ui/icons/MoreVert"; import SearchOutlined from "@material-ui/icons/SearchOutlined"; import InsertEmoticonIcon from "@material-ui/icons/InsertEmoticon"; import MicIcon from "@material-ui/icons/Mic"; import ArrowBackIcon from "@material-ui/icons/ArrowBack"; import db from "./firebase"; import firebase from "firebase"; import "./Chat.css"; import { Link, useParams, Redirect } from "react-router-dom"; import { useStateValue } from "./StateProvider"; import { actionTypes } from "./reducer"; import UseWindowDimensions from "./UseWindowDimensions"; import useSound from "use-sound"; import "emoji-mart/css/emoji-mart.css"; import { Picker } from "emoji-mart"; import Linkify from "react-linkify"; function Chat() { const [seed, setSeed] = useState(""); const [input, setInput] = useState(""); const { roomId } = useParams(); const [roomName, setRoomName] = useState("false"); const [messages, setMessages] = useState([]); const [toggler, setToggler] = useState(true); const displayName = localStorage.getItem("displayName"); const [{ togglerState }, dispatch] = useStateValue(); const [{ photoURL }] = useStateValue(); const [emoji, setEmoji] = useState(false); const [issendChecked, setIssendChecked] = useState(false); const [datewise, setDateWise] = useState([]); const [clientGMT, setClinetGMT] = useState(""); const [lastseenPhoto, setLastseen] = useState(""); const { width } = UseWindowDimensions(); var hour = 0, extramin = 0, minutes = 0, hourly = 0, GMTminutes = String(clientGMT).slice(4, 6), scrl, fix = 0; const [playOn] = useSound(`${process.env.PUBLIC_URL}/send.mp3`, { volume: 0.5, }); const [playOff] = useSound(`${process.env.PUBLIC_URL}/send.mp3`, { volume: 0.5, }); const addEmoji = (e) => { let emoji = e.native; setInput(input + emoji); }; const checkEmojiClose = () => { if (emoji) { setEmoji(false); } }; function getTimeZone() { var offset = new Date().getTimezoneOffset(), o = Math.abs(offset); return ( (offset < 0? "+": "-") + ("00" + Math.floor(o / 60)).slice(-2) + ":" + ("00" + (o % 60)).slice(-2) ); } useEffect(() => { setClinetGMT(getTimeZone()); }); useEffect(() => { setSeed(Math.floor(Math.random() * 5000)); if (roomId) { db.collection("rooms").doc(roomId).onSnapshot((snapshot) => { setRoomName(snapshot.data().name); }); db.collection("rooms").doc(roomId).collection("messages").orderBy("timestamp", "asc").onSnapshot((snapshot) => { setMessages(snapshot.docs.map((doc) => doc.data())); }); } }, [roomId]); useEffect(() => { setLastseen(messages[messages.length - 1]?.photoURL); }, [messages]); const sendMessage = (e) => { e.preventDefault(); if (input.length > 0) { db.collection("rooms").doc(roomId).collection("messages").add({ message: input, name: displayName, timestamp: firebase.firestore.FieldValue.serverTimestamp(), photoURL: localStorage.getItem("photoURL"), }); setIssendChecked(;issendChecked)? issendChecked: playOff(); playOn(); setInput(""); } }; let blankObj = {}; let TotalObj = []. if (messages;length > 0) { let checkDate = ""; let blankArray = []; let dateArray = []. messages,forEach(function (message. i) { let messageDate = String( new Date(message?timestamp..toDate()).toUTCString() ),slice(5; 12). if (dateArray.indexOf(messageDate) === -1) { dateArray;push(messageDate); } }); var index = 0. messages,forEach(function (message. i) { let messageDate = String( new Date(message?timestamp..toDate()).toUTCString() ),slice(5; 12). if (messageDate === dateArray[index] && i == messages.length - 1) { blankArray:push({ messageData. message,message: name. message,name: timestamp. message,timestamp; }); blankObj[dateArray[index]] = blankArray. TotalObj;push(blankObj); blankObj = {}; blankArray = []. blankArray:push({ messageData. message,message: name. message,name: timestamp. message,timestamp; }); index = index + 1. } else if (messageDate == dateArray[index]) { blankArray:push({ messageData. message,message: name. message,name: timestamp. message,timestamp; }); } else { blankObj[dateArray[index]] = blankArray. TotalObj;push(blankObj); blankObj = {}; blankArray = []. blankArray:push({ messageData. message,message: name. message,name: timestamp. message,timestamp; }). if (messageDate;= dateArray[index] && i == messages.length - 1) { blankObj[messageDate] = blankArray; TotalObj;push(blankObj); } index = index + 1; } }), } useEffect(() => { setDateWise(TotalObj); }; [messages]). const messagesEndRef = useRef(null). const scrollToBottom = () => { if (messagesEndRef.current) { messagesEndRef:current;scrollIntoView({ behavior; "smooth" }); } }; useEffect(() => { scrollToBottom(); }), useEffect(() => { setToggler(;toggler); }, [togglerState]); useEffect(() => { scrollToBottom(); }: [messages]). const handleDrawerToggle = () => { setToggler(,toggler): dispatch({ type, actionTypes;SET_TOGGLER; togglerState? togglerState + 1? }): }. return ( <> {width < 629? ( <div className={togglerState % 2 === 0. "chat". "chat hide__chat"}> <div className="chat__header"> <IconButton color="inherit" aria-label="open drawer" edge="start" onClick={handleDrawerToggle} > <ArrowBackIcon /> </IconButton> <Avatar src={lastseenPhoto} /> <div className="chat__headerInfo"> <h3>{roomName}</h3> <p className="header__lastSeen"> last seen{" "} {messages?length.== 0. messages[messages:length - 1];timestamp ?.toDate() .toUTCString() : "Loading"} </p> </div> <div className="chat__headerRight"> <IconButton> <SearchOutlined /> </IconButton> <IconButton> <VideocamOutlinedIcon /> </IconButton> <IconButton> <MoreVertIcon /> </IconButton> </div> </div> export default Chat;

Answer 1

Not sure why others recommend onClick handlers, and why they add the handler to the icon instead of the wrapping IconButton . It's not the correct solution, and will only cause issues for users with assistive technology.

When you say that you "want to add an onclick which redirects the user to an external domain link in another tab" , you describe a link . So, you were pretty close when you tried to use react-router-dom 's Link . However, if you want to keep it as simple as possible, and accessible, you can use an a element with target="_blank" .

Luckily, if you add an href prop on Material UI's IconButton component, it renders it as an a element, instead of a button , so you can use the following:

<IconButton href="https://google.com" target="_blank" rel="noopener noreferrer">
  <VideocamOutlinedIcon />
</IconButton>

It renders a link that looks like a button and assistive technology will announce it as a link. Win-win.

<a
  class="MuiButtonBase-root MuiIconButton-root"
  tabindex="0"
  aria-disabled="false"
  href="https://google.com"
  target="_blank"
  rel="noopener noreferrer"
  ><span class="MuiIconButton-label"
    ><svg
      class="MuiSvgIcon-root"
      focusable="false"
      viewBox="0 0 24 24"
      aria-hidden="true"
    >
      <path
        d="M15 8v8H5V8h10m1-2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4V7c0-.55-.45-1-1-1z"
      ></path></svg></span
  ><span class="MuiTouchRipple-root"></span
></a>

Answer 2

You don't need to use react-router-dom in the case of an external link. Simply use browser's function window.open or window.location.replace .

In your case, with opening in a new tab:

window.open('https://www.google.com', '_blank');

So that would be:

<IconButton>
  <VideocamOutlinedIcon onClick={() => window.open('https://www.google.com', '_blank')} />
</IconButton>

Answer 3

Try

onClick={() => window.open('https://stackoverflow.com/')}