CODEWITHSUNDEEP
reactjsbuttonreduxreact-bootstrap
hulriche
hulriche

Reputation: 57

InsertButton Probleme redirection to other page

I would like to put an Add button to my table. I use "insertRow" in BootstrapTable, in otpions I put "insertBtn: createCustomInsertButton" And in the createCustomInsertButton function, I have customized my button and I wish that when clicked it redirects to another page.

    render() {
        {
            console.log(this.props.store.environnements.length)
        }
        return (
            <div>
                <BootstrapTable selectRow={selectRow} data={this.props.store.environnements} options={options} deleteRow insertRow
                                pagination striped hover condensed>
                    <TableHeaderColumn isKey={true} dataField="id" hidden={true}>ID</TableHeaderColumn>
                    <TableHeaderColumn dataField='nom' filter={{type: 'TextFilter'}}>Nom</TableHeaderColumn>
                    <TableHeaderColumn dataFormat={buttonFormatter}>Action</TableHeaderColumn>
                </BootstrapTable>
            </div>
        );
    }

const options = {
    deleteBtn: createCustomDeleteButton,
    insertBtn: createCustomInsertButton
};

function createCustomInsertButton() {
    return (
        <InsertButton
            btnText='Ajouter'
            btnContextual='btn-success'
            className='btn-list btn-success-maif'
            btnGlyphicon='glyphicon-edit'
            onClick={test()}
       />
    );
}

function test() {
    return (
        <Redirect to='/environnement/add'></Redirect>
    );
}

Upvotes: 0

Views: 30

Answers (2)

Michael George
Michael George

Reputation: 248

Use

 onClick = { () => test() }

or

onClick = { test }

If you have a SPA, you should use the Link from react-router

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

<Link to="/page"> Page </Link>

Upvotes: 1

Jake Worth
Jake Worth

Reputation: 5852

Provided everything above the createCustomInsertButton definition works the way you'd expect, onClick expects a function. Your code instead calls a function, so whenever createCustomInsertButton is invoked, test is too.

Instead, pass the function to onClick (no parentheses):

onClick={test}

From the React docs:

With JSX you pass a function as the event handler, rather than a string.

React Handling Events Docs

Upvotes: 1

Related Questions