Mix text with components in a React component

Question

Is there a way I can shorten this?

const visitInfo = (date, guide, attendee) => {
  return (
    <>
      {(date || guide) && ' The tour was performed'}
      {date && ' at '}
      {date && <TimeFormat>{date}</TimeFormat>}
      {date && ' on '}
      {date && <DateFormat}>{date}</DateFormat>}
      {guide && ` by ${guide}`}
      {attendee && ` and was attended by ${attendee}`}.
    </>
  )
}

...did you *try* anything? It feels like `date &&` could stand to be factored out if nothing else. — jonrsharpe, Sep 02 '20 at 19:05
@jonrsharpe Yes, I spent long time to figure out to avoid the `date &&` repetition but couldn't find another solution than the one above and that's why I have posted the question. Does this look like I haven't tried anything? — user3378165, Sep 02 '20 at 19:34
You don't *mention* trying any other things, that's all we can go on. Also it doesn't seem very conventional; is visitInfo supposed to be a function-based component? Do DateFormat and TimeFormat really take the date as a *child*? — jonrsharpe, Sep 02 '20 at 20:04
Does this answer your question? [Is there a way to render multiple React components in the React.render() function?](https://stackoverflow.com/questions/32577886/is-there-a-way-to-render-multiple-react-components-in-the-react-render-functio) — Emile Bergeron, Sep 02 '20 at 20:06
@jonrsharpe Thanks for your feedback, much appreciated, I'm happy to learn. — user3378165, Sep 02 '20 at 20:13

jonrsharpe · Accepted Answer · 2020-09-02T20:02:59.997

Text and other elements both count as children of an element, so you can wrap them in a fragment too, letting you factor out the repetition of date &&:

const visitInfo = (date, guide, attendee) => {
  return (
    <>
      {(date || guide) && ' The tour was performed'}
      {date && (
        <> at <TimeFormat>{date}</TimeFormat> on <DateFormat>{date}</DateFormat></>
      )}
      {guide && ` by ${guide}`}
      {attendee && ` and was attended by ${attendee}`}.
    </>
  );
}

The formatter here seems unhappy, but it works fine in e.g. Babel's REPL.

arunmmanoharan · Answer 2 · 2020-09-02T19:44:59.787

0

const visitInfo = (date, guide, attendee) => {
  return (
    <>
      {(date || guide) && ' The tour was performed'}
      {date && ` at ${<TimeFormat>{date}</TimeFormat>} on ${<DateFormat>{date}</DateFormat>}`}
      {guide && ` by ${guide}`}
      {attendee && ` and was attended by ${attendee}`}.
    </>
  )
}

edited Sep 02 '20 at 19:44

answered Sep 02 '20 at 19:15

arunmmanoharan

2,535
2
29
60

Do you get any error in your console? – arunmmanoharan Sep 02 '20 at 19:42
Sorry. Fixed the typo I had. Try now using the above code. – arunmmanoharan Sep 02 '20 at 19:45
Didn't notice:) Thanks! – user3378165 Sep 02 '20 at 19:46
The components are being rendered as `[object Object]` i.e. `The tour was performed at [object Object] on [object Object]` – user3378165 Sep 02 '20 at 19:48
Looks like TimeFormat and DateFormat returns objects. Can you try {date && ` at ${({date}).toString()} on ${({date}).toString()}`}? – arunmmanoharan Sep 02 '20 at 19:51
Looks like your dateFormat component returns a date object. Do you use moment in your codebase? – arunmmanoharan Sep 02 '20 at 19:54
2

@a2441918 that's just *not* how you render components – jonrsharpe Sep 02 '20 at 19:55
@a2441918 yes, my dateFormat component returns a date object, I'm not using moment. – user3378165 Sep 02 '20 at 20:00

Mix text with components in a React component

2 Answers2