Support for fetching non-node djedi content in djedi-react

[eliassjogreen]

I have encountered several different situations where I would like to fetch get a simple string from djedi-react, without using the Node element. There might already be ways to do this but it does not seem like they are very well documented nor as easy to use as the good old <Node uri=""></Node> in react components. Usecases I have found for this is for example using a djedi value as the title or entry in a select dropdown, currently it is fetched but simply coerced into a [object Object] string.

[hbystrom91]

@eliassjogreen I usually have a helper component for this. You can do something like:

import React from 'react';

import { DjediNodeState, DjediNodeStateAlternate } from 'types/Djedi';

const getDjediNodeTextContent = (state: DjediNodeStateAlternate | DjediNodeState) =>
  typeof state.content === 'object' ? state.content.props.children : state.content;

interface RestProps {
  [key: string]: unknown;
}

interface DjediContentProps extends RestProps {
  node: React.ReactElement;
  children: (content: string) => React.ReactNode;
}

const DjediContent = ({ node, children, ...restProps }: DjediContentProps) => {
  return React.cloneElement(node, {
    ...restProps,
    render: function getElementState(state: DjediNodeStateAlternate | DjediNodeState) {
      return children(state.type === 'success' ? getDjediNodeTextContent(state) : '');
    },
  });
};

export default DjediContent;

And in your field components you would check the type of the prop. Either it would be a string or an object (if it's a node). If it's a node you wrap with DjediContent, otherwise you just pass the string.

[eliassjogreen]

Ah ok, thanks! It feels like this should probably be part of djedi-react itself as it is a quite common issue I encounter, and the helper while nice feels a bit like an added layer of indirection.

[hbystrom91]

It could be a part of djedi-react for sure.