Reactjs - Problem using a React icon for onClick navigation

transpose
August 20, 2023
275 views
0 votes
2 Answers

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>
  );
}
``

Answers

- SahilAtahar
- August 20, 2023 at 6:01 am
- 0 votes
0
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>
    );
}
```
Login or Signup to reply.