Cannot display data in ReactJS. Error: Objects are not valid as a React child. If you meant to render a collection of children, use an array instead

I'm trying to displaying data from my backend, but I'm getting error: Error: Objects are not valid as a React child (found: object with keys {id, price, descr, link, sqf}). If you meant to render a collection of children, use an array instead.

I've been searching for solution and I came across .map but it doesn't work throws again an error.

import React, { useState, useEffect } from 'react';
import ArticleService from '../services/articles';

const Dashboard = () => {
  const [content, setContent] = useState('');

  useEffect(() => {
    ArticleService.articles().then(
      (response) => {
        setContent(response.data);
      },
      (error) => {
        const _content =
          (error.response &&
            error.response.data &&
            error.response.data.message) ||
          error.message ||
          error.toString();

        setContent(_content);
      }
    );
  }, []);

  console.log(content);
  return (
    <div className='container'>
      <h3>{content}</h3>
    </div>
  );
};

export default Dashboard;

console.log of content looks like this:

As you can see, I get content regularly I just can't display it on dashboard page. When I try {content.price} it removes an error but still doesn't show nothing. Any solutions???

Read more here: https://stackoverflow.com/questions/65717302/cannot-display-data-in-reactjs-error-objects-are-not-valid-as-a-react-child-i