Problem using a React icon for onClick navigation

Question

I am trying to use a React icon for onClick navigation to my homepage. Button onClick works for this but when I use the same code for a react icon, I get a blank page. The commented out section is the working button onClick.

import { useNavigate } from 'react-router';
import { Bix } from 'react-icons/bi';
export default function BlackWhite() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/');
  };
  return (
    <div className="BlackWhite">
      <h1>Black and white</h1>
      //<button onClick={handleClick}>Back to homepage</button>
      <Bix onClick={handleClick}></Bix>
    </div>
  );
}
``

Show the errors from the console – Konrad Aug 20 '23 at 06:31 — Konrad, Aug 20 '23 at 06:31

sahilatahar · Accepted Answer · 2023-08-20T05:48:10.083

1

Your icon name is wrong. Your are importing Bix but react-icons provide BiX. Capital X. You should check console why you are getting error. Better way is to click and copy icon name when you are selecting icons from react-icons.


import { useNavigate } from 'react-router';
import { BiX } from 'react-icons/bi';
export default function BlackWhite() {
    const navigate = useNavigate();

    const handleClick = () => {
        navigate('/');
    };
    return (
        <div className="BlackWhite">
            <h1>Black and white</h1>
            {/* <button onClick={handleClick}>Back to homepage</button> */}
            <BiX className='icon' onClick={handleClick}/>
        </div>
    );
}

edited Aug 20 '23 at 05:48

answered Aug 20 '23 at 04:01

sahilatahar

568
2
13

I tried that but I am still getting a blank page. – transpose Aug 20 '23 at 04:46
That worked but the icon displays inside a button. My aim is to have the icon display on its own. – transpose Aug 20 '23 at 05:05
@transpose You can remove button and use it. – sahilatahar Aug 20 '23 at 05:47

score 1 · Answer 2 · answered Aug 20 '23 at 05:05

1

import { useNavigate } from 'react-router-dom';

answered Aug 20 '23 at 05:05

Taki Kauser

58
6

Tahmoures Ak · Answer 3 · 2023-08-20T10:31:08.853

0

try with this :

import { useNavigate } from 'react-router-dom';
import { BiX } from 'react-icons/bi';

export default function BlackWhite() {
 const navigate = useNavigate();

 const handleClick = async (request) => {
  navigate('/'); or
  navigate('/home');
  };
 return (
  <div className="BlackWhite">
      <h1>Black and white</h1>
      {/* <button onClick={handleClick}>Back to homepage</button> */}
      <BiX className='icon' onClick={event=>{handleClick(option)}}/>
  </div>
  );
  }

edited Aug 20 '23 at 10:31

answered Aug 20 '23 at 07:35

Tahmoures Ak

1
2

I tried that. The icon is there but it is not clickable. That is, when you move the cursor over the icon, there is no change. – transpose Aug 20 '23 at 08:36
use IconButton tag like this : {handleClick(option)}}> – Tahmoures Ak Aug 21 '23 at 06:13

Problem using a React icon for onClick navigation

3 Answers3