CODEWITHSUNDEEP
reactjstypescriptmaterial-ui
Julius Goddard
Julius Goddard

Reputation: 347

Material UI Icons Do not Show in React App: "Objects Not Valid as a React Child"

I have a simple app which displays information relating to a patient.

All I am displaying in this particular component is the name, occupation and a symbol from Material UI which signifies whether they are male or female.

When I try and import these symbols using the correct Material UI Syntax and try to use them in my component - I get an error in the console which says:

Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, compare}). If you mean to render a collection of children, use an array instead.

The rest of the code works perfectly fine.

Does anyone know why this is happening?

Component Code :

import { Patient } from '../types';
import { useParams } from "react-router-dom";
import { useStateValue } from "../state";
import FemaleIcon from '@mui/icons-material/Female';
import MaleIcon from '@mui/icons-material/Male';

const SinglePatient = () => {
    const [{ patients }, dispatch] = useStateValue();

    const { id } = useParams<{ id: string }>();
    
     console.log(dispatch);

    const patient = Object.values(patients).find(
        (patient: Patient) => patient.id === id
      );
    
const displayGenderIcon = () => {
    if (patient?.gender === "male") 
    return MaleIcon;
    if (patient?.gender === "female") 
    return FemaleIcon ; 
    else return null;
};

    
    return (
        <div className="App">
        <h1>
            {patient?.name} {displayGenderIcon()}
        </h1>
        <p>{patient?.occupation}</p>

        </div>
    );
      
};

export default SinglePatient;

Upvotes: 0

Views: 139

Answers (1)

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41437

return icon as element

const displayGenderIcon = () => {
    if (patient?.gender === "male") 
    return <MaleIcon />;
    if (patient?.gender === "female") 
    return <FemaleIcon />; 
    else return null;
};

Upvotes: 1

Related Questions