CODEWITHSUNDEEP
reactjs
Aayush Chachan
Aayush Chachan

Reputation: 27

Not able to render the new component on onClick()

I am new to react and facing some problem while rendering a new component on onClick() on a table cell item.

class Component extends React.Component{

constructor(props) {
        super(props);
        this.routeChange = this.routeChange.bind(this)
        this.state = {
            values: []
        };
    }
routeChange(id) {
        console.log(id)
        const userAccount = (
            <Account  />
          );
        return userAccount;
    }

render() {
        return (
            <div className="classname1">
                <table>
                    <thead className="table-header">
                        <tr className="table-row">
                            <th>Account Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        {this.state.values.map(value => {
                            return (
                             <tr className="data-table">
                                <td className="txt-blue" onClick={() => this.routeChange(value.id)}>{value.name}</td>
                             </tr>)
                        })}
                    </tbody>
                </table>

            </div>

}

So when I execute the above everything works fine and the table has been rendered properly but when I click on the table cell item then my component is not being rendered. But I can see the console.log() which I have passed in routeChange().

Note: My state values[] is not empty because as here I am only showing the snippet of my code.

Upvotes: 0

Views: 71

Answers (2)

tcanusso
tcanusso

Reputation: 192

When you click and the event 'onClick' is triggered, it doesn't expect a return value, meaning that component you are returning is going nowhere.

What you can do to show the 'Account' component is keep a variable, say showAccount, in your state, which initialises as false, and with the method 'routeChange' what you do is change this to true.

I don't quite understand your use case, but something like this could be:

class Component extends React.Component{

constructor(props) {
        super(props);
        this.routeChange = this.routeChange.bind(this)
        this.state = {
            values: [],
            accountId: null,
            showAccount: false
        };
    }
routeChange(id) {
        console.log(id)
        /* Commenting this,
          const userAccount = (
            <Account  />
          );
          return userAccount;
        */
        this.setState({showAccount: true, accountId: id})
    }

render() {
        return (
            <div className="classname1">
                <table>
                    <thead className="table-header">
                        <tr className="table-row">
                            <th>Account Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        {this.state.values.map(value => {
                            return (
                             <tr className="data-table">
                                <td className="txt-blue" onClick={() => this.routeChange(value.id)}>{value.name}</td>
                             </tr>)
                        })}
                    </tbody>
                </table>
                {this.state.showAccount && this.state.accountId &&
                  <Account id={this.state.accountId} />
                }
            </div>

}

Anyhow, try to play with your component and see what works best for you. What I suggest may not be useful for you, so just take the concept and adapt it for your own app.

Upvotes: 1

Harihar Das
Harihar Das

Reputation: 494

You need to pass a reference of a function that calls routeChange function to the onClick function. One way to do this is to use an arrow function.

<td className="txt-blue" onClick={() => this.routeChange(values.value.id)}>{values.value.name}</td>

Upvotes: 1

Related Questions