Source: templates/IfNull.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 no tiene un valor (es igual a null)
 * @name Reactor.Components.Templates.IfNull
 * @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>IfNull</h6>
<if_null variable="test_input" context="test" >
    contenido condicional <span>que aparece</span> solo si la variable tiene valor
</if_null>
*/

export const IfNull = ({variable, context = "global", children, debug = "false"}) => {

  const varsContext = useSelector(state => state.app.variables[context]);
  const varValue = useMemo(() => {
    if(variable.startsWith("'")){
      return variable.substring(1) === "";
    }
    const value = objectPath.get(varsContext, variable);
    return value === null || value === undefined;
  }, [variable, varsContext]);

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