Source: templates/IfTrue.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 true
 * @name Reactor.Components.Templates.IfTrue
 * @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>IfTrue</h6>
<if_true variable="test_input" context="test_if_true" >
    contenido condicional <span>que aparece</span> solo si la variable es true
</if_true>
*/

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

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

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