Source: templates/Stamp.js

import React, { useMemo } from "react";
import { useSelector } from "react-redux";
const objectPath = require("object-path");

/**
 * Componente que muestra el valor de una variable primitiva (string, number)
 * @name Reactor.Components.Templates.Stamp
 * @param {string} variable Nombre de la variable
 * @param {string} [context = "global"] Nombre del contexto a usar
 * @param {string} [empty = ""] Texto que se va a mostrar cuando el valor de la variable este vacío
 * @class 
 * @example 
<stamp context="personas" variable="items.0.apellidoNombre"></stamp>
 */

export const Stamp = ({variable, context = "global", children, empty = ""}) => {
  const varsContext = useSelector(state => state.app.variables[context])
  const variableData = useMemo(()=>{
    var data = objectPath.get(varsContext, variable);
    if(typeof data === "object"){
      return JSON.stringify(data);
    }
    return data === null || data === undefined || data === "" ? empty : data;
  }, [varsContext, variable, empty]) 
  return (
    <>
      {variableData}
      {children}
    </>
  );
}