Pass URL as props using React Hooks | Redirect page

JavaScript
1

I want to pass my URL as props so I can use it in my Link tag( to redirect to another page).
I am not sure what I’m doing wrong.

My code:

import React, {createContext} from 'react'
import game1 from '../imgs/goldenjackpot.png'
import game2 from '../imgs/findtheball1.jpg'


export const GamesContext = createContext();


const GamesContextProvider = (props) => {

    const games = [
        {url: www.example.com ,  id: 1, image: game1, title: 'golden jackpot', price: 1000.00, category: 1, isNew: true, topPrize: "N5,000,000", isVerOrient: true,
        desc: "Scratch only 4 cards, if you find the jackpot card, you win N5,000,000. If you match 4 identical cards you win N50,000 instantly!"},

        {url: www.example.com , id: 2, image: game2, title: 'find the ball', price: 1000.00, category: 2, isNew: true, topPrize: "N50,000", isVerOrient: false,
        desc: "Scratch only 1 box to reveal the ball, if you find the ball, you win N50,000 instantly!"},

 
    ]
    return (
        <GamesContext.Provider value={{ games }}>
            { props.children }
        </GamesContext.Provider>
    );
}

export default GamesContextProvider;

Here is the file I want to access the props

import React from 'react'

import { FiShoppingCart } from "react-icons/fi"

import { Tooltip} from '@trendmicro/react-tooltip';

import { Link } from 'react-router-dom'

import GameTag from './GameTag';

const GameBox = (props) => {

    const gameImage = 'url('+props.image+')'

    return (

        <div>
//   Am I doing it right here?
            <Link to={ props.url} key={props.id} className="game-box">

                <div className="image flex justify-center">

                    <span className="img-box" style={{ background: gameImage, backgroundSize: 'cover', backgroundRepeat: 'no-repeat' }}></span>

                </div>

                <div className="content flex justify-between">

                    <div className="text">

                        <h1>{props.title}</h1>

                        <span>₦{props.price.toLocaleString()}</span>

                    </div>

                    <div className="cta flex justify-center">

                        <Tooltip placement="top" content="Add To Cart">

                            <FiShoppingCart />

                        </Tooltip>

                    </div>

                </div>

                { props.isNew&& ( <GameTag text="new" placement="top-left" /> )}

                {/* <div className="flex winning-price">

                    <span>top prize: &#8358;50,000</span>

                </div> */}

            </Link>

            

        </div>

    );

}

export default GameBox;

Any help would be very much appreciated. Thank you in advance

2

Hello there,

I would expect to see something like this where you want to use games:

import { GamesContext } from './wherever-it-is';

const GameBox = (props) => {
  return (
    <GamesContext.Consumer>
      {({games}) => { return (<div>{games}</div>)}}
    </GamesContext.Consumer />
  )
}

I am not seeing that.

Hope this helps

3

Thank you for reaching out @Sky020 and pointing this out, I’ll fix it.
Can you help with the link problem?
I just want it to redirect to an external url. onClick of every product.

4

I am not very familiar with the react-router-dom library, but I assume the Link component is only supposed to be used for internal links. So, for external links, you can just use the HTML a tag.

5

Does GameBox render one of the items stored in the context? Because we seem to be missing some code here. It accepts props, and those props match one of the context items, but you haven’t shown how you’re rendering that collection of items. So for example:

const GameBoxes = () => {
  const games = React.useContext(GamesContext);

  return <>{ games.map((props) => <GameBox key={props.id} ...props />) }</>;
}

Context lets you create a component (a Provider) that has one prop (value) that you store some values in. You then access it wherever you want those values by either using the provider’s matching Consumer component, or [much easier] you use the useContext hook.

Also what @Sky020 said, if those are external links, that isn’t what React Router is for.

6

Thank you for your honest feedback, I will give it a try hopefully it works. Thanks once again :pray:

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.