Why am I getting this code when I console logged the mapped Array in JSX

July 27, 2022

I have been trying to figure this out for nearly 4 hours, any help would be appreciated, I logged the array of objects just before and it worked flawlessly, objects are all working with no issues, and now it’s having a meltdown and so will I very soon.

    0: {$$typeof: Symbol(react.element), type: 'div', key: null, ref: null, props: {…}, …}
    1: {$$typeof: Symbol(react.element), type: 'div', key: null, ref: null, props: {…}, …}
    2: {$$typeof: Symbol(react.element), type: 'div', key: null, ref: null, props: {…}, …}
    length: 3
    [[Prototype]]: Array(0)

Source code

     import React from "react";
     import placeholder from "./placeholder.png";

     function Card(props) {
       const updatedData = props.data;
       console.log(typeof updatedData);
       const newEntry = updatedData.map(function (item) {
         return (
           <div>
             <div className="main-container">
               <div className="main-image">
                 <img src={item.imageUrl} alt="" />
               </div>
               <div className="main-info">
                 <div className="location-container">
                   <img className="placeholder-logo" src={placeholder} alt="" />
                   <p className="location">{item.location}</p>
                   <a href={item.googleMapsUrl}>View on Google Maps</a>
                 </div>
                 <h1>{item.title}</h1>
                 <h4 className="dates">
                   {item.startDate}-{item.endDate}
                      </h4>
                     <p className="description">{item.description}</p>
                   </div>
                </div>
               </div>
             );
            });
          console.log(newEntry);
        }

   export default Card;

>Solution :

You are missing a return on the component.

import React from "react";
import placeholder from "./placeholder.png";

function Card(props) {
  const updatedData = props.data;
  console.log(typeof updatedData);
  return updatedData.map(function (item) {
    return (
      <div>
        <div className="main-container">
          <div className="main-image">
            <img src={item.imageUrl} alt="" />
          </div>
          <div className="main-info">
            <div className="location-container">
              <img className="placeholder-logo" src={placeholder} alt="" />
              <p className="location">{item.location}</p>
              <a href={item.googleMapsUrl}>View on Google Maps</a>
            </div>
            <h1>{item.title}</h1>
            <h4 className="dates">
              {item.startDate}-{item.endDate}
            </h4>
            <p className="description">{item.description}</p>
          </div>
        </div>
      </div>
    );
  });
}