CODEWITHSUNDEEP
javascriptreactjs
BigJobbies
BigJobbies

Reputation: 4033

Doing multiple things in a React function

I was wondering if it's possible to manipulate multiple things in a component when a button is clicked.

At the moment I have a simple component. When the button is clicked it adds an id to an array... pretty simple stuff.

But what I want to also do when the button is pressed is change the button text to 'Selected' and add the 'color="danger"' tag to the button.

I'm finding this really difficult. Any help would be greatly appreciated.

import React, { Component } from "react";
import { Col, Card, CardBody, Button } from "reactstrap";

class ThisComponent extends Component {

    addResponse(id) {
        this.props.addResponseInState(id);
    }

    render() {
        const { id } = this.props;

        return (
            <Col>
                <Card>
                    <CardBody>
                        <Button onClick={() => this.addResponse(id)}>Select</Button>
                    </CardBody>
                </Card>
            </Col>
        )
    }
}

export default ThisComponent;

Upvotes: 3

Views: 170

Answers (2)

Cat_Enthusiast
Cat_Enthusiast

Reputation: 15688

You should get familiar with using component-state, which is the bread and butter of React. State essentially helps you keep track of the component at all times, be it some sort of status or some data you want to maintain.

import React, { Component } from "react";
import { Col, Card, CardBody, Button } from "reactstrap";

class ThisComponent extends Component {
    state = {
      clicked: false
    }

    addResponse(id) {
        this.props.addResponseInState(id);
        this.setState({
           clicked: true
        })
    }

    render() {
        const { id } = this.props;

        return (
            <Col>
                <Card>
                    <CardBody>
                        <Button
                          color={this.state.clicked ? "danger" : ""}
                          onClick={() => this.addResponse(id)}
                        >
                            { !this.state.clicked ? "Select" : "Selected"}
                        </Button>
                    </CardBody>
                </Card>
            </Col>
        )
    }
}

export default ThisComponent;

Upvotes: 7

Kyryl Stronko
Kyryl Stronko

Reputation: 344

You can do whatever you want in your function. But you should also add state to your component if you want to store some data inside.

import React, { Component } from "react";
import { Col, Card, CardBody, Button } from "reactstrap";

class ThisComponent extends Component {
    constructor(props) {
        super(props);
        
        this.state = {
            isSelected: false,
        }
    }

    addResponse(id) {
        this.props.addResponseInState(id);
        
        this.setState({isSelected: true})
    }

    render() {
        const { id } = this.props;
        const { isSelected } = this.state;

        return (
            <Col>
                <Card>
                    <CardBody>
                        <Button 
                           onClick={() => this.addResponse(id)}
                           className={isSelected ? 'selected' : ''}
                        >
                            Select
                        </Button>
                    </CardBody>
                </Card>
            </Col>
        )
    }
}

export default ThisComponent;

Upvotes: 0

Related Questions