Source: templates/IfFalse.js

import React, { useEffect, useMemo } from "react";
import { useSelector } from "react-redux";
import { booleanString } from "../../_core";
const objectPath = require("object-path");
/**
 * Componente que renderiza su contenido si se la variable que se le pasa es false
 * @name Reactor.Components.Templates.IfFalse
 * @param {string} variable Nombre de la variable (o path), para enviar valores absolutos (o parametros) comenzar con comilla simple la cadena, es este caso no se requiere context
 * @param {string} [context = "global"] Nombre del contexto a usar
 * @class 
 * @example 
<h6>IfFalse</h6>
<if_false variable="test_input" context="test_if_false" >
    contenido condicional <span>que aparece</span> solo si la variable es false
</if_false>
*/

export const IfFalse = ({variable, context = "global", children, debug = "false"}) => {
  const varsContext = useSelector(state => state.app.variables[context]);
  const varValue = useMemo(() => {
    if(variable.startsWith("'")){
      return variable.substring(1) !== "false";
    }
    return objectPath.get(varsContext, variable);
  }, [variable, varsContext]);

  useEffect(()=>{
    if(booleanString(debug)){
      console.log("if_false", {varsContext, variable, context, varValue});
    }
  }, [])
  
  return (
    <>
      {typeof varValue === "boolean" && varValue === false && 
        children
      }
    </>
  )
}