Work out which component an event is coming from

February 18, 2021 by admin

I have a react component for a checkbox that is used in multiple components.

const Checkbox = (props) => {
    return (
        <Col>
            <div className="switch">
                <input id={props.value} type="checkbox" value={props.value} className="visually-hidden" onChange={props.handleChange}/>
                <label htmlFor={props.value} className="switch-label checkbox-label text-center">{props.label}</label>
            </div>
        </Col>
    )
}

export default Checkbox

I want to have a single function that handles the change from this component but work out the parent component that called it so I can update the correct value in my state.

For example, I have an Attendees component that uses my checkbox component:

export default class Attendees extends Component {
    state = {
        attendees: [
            {id: 1, value: 500, label: "0 - 500", checked: false},
            {id: 2, value: 1500, label: "500 - 1.5k", checked: false},
            {id: 2, value: 5000, label: "1.5k - 5k", checked: false},
            {id: 2, value: 10000, label: "5k - 10k", checked: false},
            {id: 2, value: 25000, label: "10k - 25k", checked: false},
            {id: 2, value: 50000, label: "25k - 50k", checked: false},
            {id: 2, value: 1000000, label: "50k+", checked: false},
        ]
    }

    render() {
        return (
            <div>
                <Row>
                    <Col>
                        <h4 className="ui centered question-header text-center">HOW MANY ATTENDEES DO YOU EXPECT?</h4>
                    </Col>
                </Row>
                <Row>
                    {
                        this.state.attendees.map((number) => {
                            return (<Checkbox name="attendees" key={number.value}
                                           handleChange={this.props.handleChange} {...number} />)
                        })
                    }
                </Row>
            </div>
        )
    }
}

When my handleChange function gets fired I want to know if it came from the attendees component so I can update my attendee’s value in my state, currently I have this as my handleChange function which only updates the event_format on my state. Is this possible?

constructor() {
        super();
        this.state = {
            event_format: [],
            attendees: 0,
        }

        this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
    }

    handleCheckboxChange(event) {
        const target = event.target;
        let value = target.value;
        let eventFormatsCopy = this.state.event_format;
        if (target.checked) {
            eventFormatsCopy.push(value)
            this.setState({
                event_format: eventFormatsCopy
            })
        } else {
            const index = eventFormatsCopy.indexOf(value)
            eventFormatsCopy.splice(index, 1);
            this.setState({
                event_format: eventFormatsCopy
            })
        }
        console.log(this.state)
    }