How to fix Objects are not valid as a React child (found: object with keys {}) in React

Error: Objects are not valid as a React child (found: object with keys {name, age}).
    at MyComponent (MyComponent.jsx:15)
    at App (App.jsx:8)

// Before (causes error)
function UserCard({ user }) {
  return <div>{user}</div>; // Error: rendering entire object
}

// After (correct)
function UserCard({ user }) {
  return (
    <div>
      <h2>{user.name}</h2>
      <p>Age: {user.age}</p>
      <p>Email: {user.email}</p>
    </div>
  );
}

// Or for debugging, use JSON.stringify
function DebugCard({ data }) {
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

// Before (causes error)
function UserList({ users }) {
  return <div>{users}</div>; // Error: rendering array directly
}

// After (correct)
function UserList({ users }) {
  return (
    <div>
      {users.map((user) => (
        <div key={user.id}>
          <h3>{user.name}</h3>
          <p>{user.email}</p>
        </div>
      ))}
    </div>
  );
}

// With separate component for clarity
function UserList({ users }) {
  return (
    <ul>
      {users.map(user => (
        <UserListItem key={user.id} user={user} />
      ))}
    </ul>
  );
}

// Before (causes error)
function Greeting({ message }) {
  return <div>{{message}}</div>; // Creates {message: "value"}
}

// After (correct)
function Greeting({ message }) {
  return <div>{message}</div>; // Renders the string value
}

// Double braces are only needed for inline styles
function StyledDiv() {
  return <div style={{ color: "red", fontSize: 16 }}>Styled</div>;
}

// Before (causes error)
function AsyncComponent() {
  const data = fetchData(); // Returns a Promise
  return <div>{data}</div>; // Error: rendering Promise object
}

// After (correct)
import { useEffect, useState } from 'react';

function AsyncComponent() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    async function getData() {
      try {
        const result = await fetchData();
        setData(result);
      } catch (error) {
        console.error(error);
      } finally {
        setLoading(false);
      }
    }
    getData();
  }, []);
  
  if (loading) return <div>Loading...</div>;
  if (!data) return <div>No data</div>;
  
  return <div>{data.value}</div>;
}

// Before (causes error)
function EventCard({ event }) {
  return (
    <div>
      <h2>{event.title}</h2>
      <p>Date: {event.date}</p> {/* Error if date is a Date object */}
    </div>
  );
}

// After (correct)
function EventCard({ event }) {
  return (
    <div>
      <h2>{event.title}</h2>
      <p>Date: {event.date.toLocaleDateString()}</p>
      {/* Or: {event.date.toISOString()} */}
      {/* Or: {new Date(event.date).toDateString()} */}
    </div>
  );
}

// Using modern formatting
function EventCard({ event }) {
  const formattedDate = new Intl.DateTimeFormat('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  }).format(event.date);
  
  return (
    <div>
      <h2>{event.title}</h2>
      <p>Date: {formattedDate}</p>
    </div>
  );
}

interface User {
  id: number;
  name: string;
  email: string;
}

interface UserCardProps {
  user: User;
}

// TypeScript will warn if you try to render the entire user object
function UserCard({ user }: UserCardProps) {
  // return <div>{user}</div>; // Type error: JSX element type 'User' is not constructible
  
  // Correct: render specific properties
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

// Define explicit return types
function UserList({ users }: { users: User[] }): JSX.Element {
  return (
    <div>
      {users.map(user => (
        <UserCard key={user.id} user={user} />
      ))}
    </div>
  );
}