Proyectos de Subversion LeadersLinked - Backend

import React from 'react'
import { useEffect } from 'react'
import { useState } from 'react'

const ToggleComponent = ({
        label1 = 'Activo',
        label2 = 'Inactivo',
        setValue = function () { },
        currentValue =true
}) => {

        const [isActive, setIsActive] = useState((currentValue) ? true : false)

        useEffect(() => {
                setValue(isActive)
        }, [isActive])

        useEffect(() => {
                setIsActive((currentValue) ? true : false)
                
        }, [currentValue])

  
        return (
                <div
                        className={`toggle btn btn-block btn-primary ${!isActive && 'off'}`}
                        data-toggle="toggle"
                        role="button"
                        style={{ width: '130px' }}
                        onClick={() => setIsActive(!isActive)}
                >
                        <input
                                type="checkbox"
                                checked={isActive}
                        />
                        <div className="toggle-group">
                                <label htmlFor="status" className="btn btn-primary toggle-on">{label1}</label>
                                <label htmlFor="status" className="btn btn-light toggle-off">{label2}</label>
                                <span className="toggle-handle btn btn-light"></span>
                        </div>
                </div>
        )
}

export default ToggleComponent