React render when using onClick

Question

Wanted to know if there is way you can render the component without constructor.

Below is the my onClick code. My goal is to render when you click the button so that the button disappears. I wasn't sure if there was way to render this without creating

 constructor(props) {
        super(props);
        this.state = {}
 }






 <div>
    <h1>Title: {post.title}</h1>
    <h2>Pages: {post.pages}</h2>
    <div>Reviews:</div>
    <button 
        onClick={() => { this.props.addToMyPage(
              {
                  userId: user.user.user_id, 
                  bookId: post.book_id
              }
         )}}>
         Add this to my page
    </button>
 </div>
)

d

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { selectBook } from '../actions/index';
import { addToMyPage } from '../actions/index';
import { Link } from 'react-router';
import { selectUser } from '../actions/index.js';
import { getBooks } from '../actions/index';
import _ from 'lodash';

class BookDetails extends Component {
    constructor(props) {
        super(props);
        this.state = {
            show: true
        };
    }    
    componentWillMount() {
        this.props.selectBook(this.props.params.id)
        if(this.props.user) {
            this.props.selectUser(this.props.user.user.user_id);
        }
        else { 
            this.props.selectBook(this.props.params.id);
        }
    }

    renderList() {

        const elems = [];
        const urlId = parseInt(this.props.params.id);
        this.props.list.forEach((list) => {
            console.log("list", list.book_id);
            console.log("params", this.props.params.id)
                if(list.book_id === urlId) {
                    console.log("true");
                    elems.push({
                        book: list.book_id
                    })
                }
        })
        return elems;
    }
    render() {
        const {post} = this.props;
        const {user} = this.props;
        const {list} = this.props;
        const renderList = this.renderList();
        const urlId = parseInt(this.props.params.id);

        if(!post) {
           return <div>Loading...</div>
        }

        if(user && list) {
            if(urlId === _.get(renderList, '[0].book')) {
                return (
                    <div>
                        <h1>Title: {post.title}</h1>
                        <h2>Pages: {post.pages}</h2>
                        <div>Reviews:</div>
                    </div>
                )
            }
            else {
                return (
                   <div>
                        <h1>Title: {post.title}</h1>
                        <h2>Pages: {post.pages}</h2>
                        <div>Reviews:</div>
                        {this.state.show && <button 
                            onClick={() => { this.setState({show:false}, this.props.addToMyPage(
                                {
                                    userId: user.user.user_id, 
                                    bookId: post.book_id
                                }
                                ))}}>
                            Add this to my page
                        </button>
                    </div>
                )
            }
        }
        else {
            return (
                <div>
                    <h1>Title: {post.title}</h1>
                    <h2>Pages: {post.pages}</h2>
                    <div>Reviews:</div>
                </div>
            )
        }
    }
}

function mapStateToProps(state) {
    return {
        post: state.books.post,
        user: state.user.post,
        list: state.list.all

    }
}
export default connect(mapStateToProps, {selectBook, addToMyPage, getBooks, selectUser})(BookDetails);

Dekel · Accepted Answer · 2017-04-07 23:47:45Z

1

You can easily show the button based on the state of your function:

this.state = {
    show: true
};

====

<div>
....
{this.state.show && <button 
    onClick={() => { this.props.addToMyPage(
          {
              userId: user.user.user_id, 
              bookId: post.book_id
          }
     ); this.setState({show:false})}}>
     Add this to my page
</button>
}
...
</div>

Once the button clicked - you change the state to show: false and this will cause the button to be removed from your DOM.

edited Apr 7, 2017 at 23:47

answered Apr 7, 2017 at 23:23

Dekel

62.9k12 gold badges109 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Yh1234 Over a year ago

I have update my code it seems to work but in the console there is error enqueueCallback(...). Not exactly sure why it is throwing this error.

Dekel Over a year ago

When you run it without the setState you don't get the errors? Another option - you can call the addToMyPage function outside of the setState call, as I'm not sure what exactly this function does (it might interfere with the current object)

Yh1234 Over a year ago

Yeah when I didn't do setState it didn't throw error. Sorry pretty new to coding, I am not sure what you mean by call addToMyPage function outside of the setState.

Yh1234 Over a year ago

Ah gotcha. Everything works without throwing errors now. Thanks for the help.

Collectives™ on Stack Overflow

React render when using onClick

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related