React JS - JSX returns [object Object] instead of string

Question

Why this JSX hook returns [object Object] [object Object] instead of HTML string?

export default function Article (props) {

  const {
    content,
  } = props;

  console.log({content});

  return (
    <>
      <div>
        {content.replace(/<p>(.*?)<\/p>/g, (match) => {
          return (
              <p className="text-black">{match}</p>
          );
        })}
      </div>
    </>
  )
}

Console.log print:

{
  content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dignissim ac ante nec hendrerit.</p>\n' +
    '\n' +
    '<p>Morbi rhoncus diam quis sodales iaculis. Morbi ullamcorper consectetur ultricies. Nam vel efficitur erat.</p>'
}

Drew Reese · Accepted Answer · 2021-01-30 23:51:20Z

Issue

Why this JSX hook returns [object Object] [object Object] instead of HTML string?

You are attempting to render the returned of content.replace but the function you use to replace is returning a JSX object instead of a new string. You are also copying the entire match instead of just the captured group.

Solution

It is very unclear to me what you are trying to do, or why, but if you want to modify the raw HTML you can do a string replace, but you need to then use standard HTML (not JSX!!) and set the innerHTML of the div. Here you need to specify class instead of className.

<div
  dangerouslySetInnerHTML={{
    __html: content.replace(/<p>(.*?)<\/p>/g, (match, p1) => {
      return `<p class="text-black">${p1}</p>`;
    })
  }}
></div>

or a bit more simple without the updater function

<div
  dangerouslySetInnerHTML={{
    __html: content.replace(/<p>(.*?)<\/p>/g, '<p class="text-black">$1</p>')
  }}
></div>

Collectives™ on Stack Overflow

React JS - JSX returns [object Object] instead of string

1 Answer 1

Issue

Solution

Demo

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Issue

Solution

Demo

Comments

Your Answer

Sign up or log in

Post as a guest

Related