Search code examples
javascriptcssreactjsjsxhref

href attribute on div elements doesn't work in React hooks

I am trying to make a Breaking Bad Character information App with React Hooks. I want it to go to a new tab and search the character when I click on a Character Card. But when I click on it, anything happens. Here is my Card Component:

const CardCharacter = ({ character }) => {
    var googleSearch = "https://www.google.com/search?q=" + `${character.name}`;
    return (

        <div className="card my-4" href={googleSearch} target="_blank">
            <div className="card-inner">
                <div className="card-front">
                    <img className="card-image" src={character.img} alt={character.name} />
                </div>
                <div className="card-back mt-3 px-1">
                    <h3 className="my-2">{character.name}</h3>
                    <p className="my-1"><strong className="text-title">Played By: </strong>{character.portrayed}</p>
                    <p className="my-1"><strong className="text-title">Nick Name: </strong>{character.nickname}</p>
                    <p className="my-1"><strong className="text-title">Occupation: </strong>{character.occupation}</p>
                    <p className="my-1"><strong className="text-title">Status: </strong>{character.status}</p>
                    <p className="my-1"><strong className="text-title">Birthday: </strong>{character.birthday}</p>
                </div>
            </div>
        </div>

    );
}
export default CardCharacter;
I check it with Google React Developer Tool:

enter image description here

Solution

  • You need to use an <a> tag.

    const CardCharacter = ({ character }) => {
        var googleSearch = "https://www.google.com/search?q=" + `${character.name}`;
        return (

        <a  href={googleSearch} target="_blank">
             <div className="card my-4">
            <div className="card-inner">
                <div className="card-front">
                    <img className="card-image" src={character.img} alt= 
                     {character.name} />
                </div>
                <div className="card-back mt-3 px-1">
                    <h3 className="my-2">{character.name}</h3>
                    <p className="my-1"><strong className="text-title">Played By: </strong>{character.portrayed}</p>
                    <p className="my-1"><strong className="text-title">Nick Name: </strong>{character.nickname}</p>
                    <p className="my-1"><strong className="text-title">Occupation: </strong>{character.occupation}</p>
                    <p className="my-1"><strong className="text-title">Status: </strong>{character.status}</p>
                    <p className="my-1"><strong className="text-title">Birthday: </strong>{character.birthday}</p>
                </div>
            </div>
        </div>
        </a>

    );
}
export default CardCharacter;

    read this : https://www.w3schools.com/tags/tag_a.asp