Enable button based on map value React

Question

I have a component that renders a list of books into bootstrap cards with a checkout button. I have a state for the checkout button called disabled.

I want to enable the button only if the books.quantity>0. How can I successfully change the state of this button?

    constructor(props) {
    super(props)

    this.state = {
        books: [],
        message: null,
        disabled: true
    }

}

    render() {

    return (
        <Container fluid>
            <Row>
                {
                    this.state.books.map(
                        books =>
                            <Col key={books.id} sm="2">
                                <Card style={{ width: '18rem' }}>
                                    <Card.Img variant="top" src="http://res.freestockphotos.biz/pictures/14/14301-illustration-of-a-book-pv.png" />
                                    <Card.Body>
                                        <Card.Title>{books.title}</Card.Title>
                                        <Card.Subtitle> {books.author.firstName + " " + books.author.lastName} </Card.Subtitle>
                                        <Card.Subtitle > {books.quantity} </Card.Subtitle>
                                        <Button disabled={this.state.disabled}  variant="primary" >Checkout</Button>                                        
                                    </Card.Body>
                                </Card>
                            </Col>
                    )
                }
            </Row>
        </Container>
    );
}

norbitrial · Accepted Answer · 2020-08-10 21:40:44Z

1

You can add to the disabled attribute the following:

<Button disabled={books.quantity > 0} variant="primary">Checkout</Button>

This will check the value of books.quantity > 0 and enable the button if the statement is true.

answered Aug 10, 2020 at 21:40

norbitrial

15.2k10 gold badges39 silver badges66 bronze badges

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

Collectives™ on Stack Overflow

Enable button based on map value React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related