CODEWITHSUNDEEP
javascripthtmlreactjsreact-router
Jyu Viole Grace
Jyu Viole Grace

Reputation: 45

Set button made in js to route to another page in React

Im making div element in for-loop and want to assign every div to link to /campaign page with his id.

I want on div click to go to "/campaign/id" page and pass id to Campaign component.

class Home extends Component{
   ...
   async printCampaigns(){
        const totalSupply = 5
        const mainDiv = document.getElementById("myID")
            for(var i = 0;i<totalSupply;i++){
                const _div = document.createElement('div')
                _div.onclick = function() {
                    //I want this onclick to go to ("/campaign/" + _div.id)
                }
                mainDiv.appendChild(_div)
            }
    }
   ...
}

This is my Router code

const Routing = () => {
    return(
        <Router>
            <Header/>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/campaign/:id" component={Campaign} />
            </Switch>
        </Router>
    )
}

ReactDOM.render(<Routing />, document.getElementById('root'));

This class to open on /campaign/id and to have access to that id

class Campaign extends Component{
}

Upvotes: 1

Views: 62

Answers (1)

Sektowr
Sektowr

Reputation: 366

you can use setAttribute function for set _div id and window.location.href for onClick event Like this :

  async printCampaigns(){
        const totalSupply = 5
        const mainDiv = document.getElementById("myID")
            for(var i = 0;i<totalSupply;i++){
                const _div = document.createElement('div');
                _div.setAttribute("id", i);
                _div.onclick = function() {
                    window.location.href="/campaign/"+ i;
                }
                mainDiv.appendChild(_div)
            }
    }

Upvotes: 2

Related Questions