unable to use with map

[moimikey]

          <Truncate lines={2} ellipsis={(<span>...</span>)}>
          {
            map((x, i) => (
              <Attachment featuresFormatted={get(event, "featuresFormatted")}
                          index={i} key={get(x, "uri")}
                          attachment={x} highlightedAttachmentNames={highlightedAttachmentNames} />
            ), get(event, "attachments"))
          }
          </Truncate>

fails for me :(

[pablosichert]

<Truncate>
    {Array(300).fill('word ').map((content, i) => (
        <span key={i}>{content}</span>
    ))}
</Truncate>

works fine for me.

Could you provide some additional info:

• Which version of react-truncate are you using?
• How is your map function defined (Array.prototype.map?)
• What does get(event, "attachments") return?
• What kind of DOM element does <Attachment> return?

For that matter, could you do

console.log(
    map((x, i) => (
        <Attachment
            featuresFormatted={get(event, "featuresFormatted")}
            index={i}
            key={get(x, "uri")}
            attachment={x}
            highlightedAttachmentNames={highlightedAttachmentNames}
        />
    ), get(event, "attachments"))
);

and paste the output here?

[moimikey]

@pablosichert well i'm silly. this is my own problem. i looked at the source code and took notice that it is genuinely just for text nodes. i'm making an attempt to map over a component that returns html.

thanks for the thorough response.

to follow-up, what do you think the likelihood is of having the ability to truncate components wholely vs text nodes. is it worth a PR? in my case, i've got n number of <Attachment /> components in an array; each <Attachment /> returns something like <div><i class="icon"> text</div>, and i want to truncate down to only display x number of <Attachment /> components. maybe a different project? or could you anticipate this project having the ability to additionally be inclusive of React elements?

[pablosichert]

No worries :-)

There has been a similar feature request #8.

I had some ideas on how to implement a solution that works for any node, but don't have an overall plan yet. Also, can't promise any schedule for this feature until we need it in production.

Closing this for now.

As a solution for your use case, wouldn't something like this work?

let attachments = [];
let _attachments = get(event, "attachments");

let numAttachments = showAll ? _attachments.length : Math.min(_attachments.length, 3);

for (let i = 0; i < numAttachments; i++) {
    let attachment = attachments[i];

    attachments.push(
        <Attachment
            featuresFormatted={get(event, "featuresFormatted")}
            index={i}
            key={get(attachment, "uri")}
            attachment={attachment}
            highlightedAttachmentNames={highlightedAttachmentNames}
        />
    );
}

return (
    <div>{attachments}</div>
);

And some button in your UI that toggles the showAll variable.