How to pass in array of objects

I am trying to render data in my app - just the create react app using an array of objects. I’m still learning React so I’m trying to figure it out.

This returns ie.map is not a function. Which led me to research mapping, but I’m still confused. It’s the “how to draw a horse” problem I am running into. Any easy to read resources for beginners?

const staticEvents = [
  {
    title: "Some title",
    description: "some description",
    when: { 
      end_time: 1600444800, 
      object: "timespan", 
      start_time: 1600438500 
    },
  },
  {
    title: "Some title",
    description: "some description",
    when: { 
      end_time: 1600444800, 
      object: "timespan", 
      start_time: 1600438500 
    },
  },
];



export default function App() {
  return (
    <div className="App">
      <some-component events={staticEvents}/>
    </div>
  );
}

Welcome, tjperry.

It is difficult to help without seeing more code. Specifically, we would need to see what you have within some-component.

If you are just looking for more information on using React, then I would recommend the freeCodeCamp section on React:
React | freeCodeCamp.org

Hope this helps

Are you sure that ie is an array?

As said, we need to see the child component. Are you mapping over props.events in the child component?




Example
export default function App() {
  return (
    <div className="App">
      <Child events={staticEvents} />
    </div>
  );
}

function Child(props) {
  return (
    <div className="App">
      {props.events.map((event, idx) => (
        <div className="event" key={idx}>
          <h3>{event.title}</h3>
          <p>{event.description}</p>
          <p>Start: {event.when.start_time}</p>
          <p>End: {event.when.end_time}</p>
        </div>
      ))}
    </div>
  );
}

Or if you use destructuring.

Example
function Child({ events }) {
  return (
    <div className="App">
      {events.map(({title, description, when}, idx) => (
        <div className="event" key={idx}>
          <h3>{title}</h3>
          <p>{description}</p>
          <p>Start: {when.start_time}</p>
          <p>End: {when.end_time}</p>
        </div>
      ))}
    </div>
  );
}

I agree with what lasjorg is saying, but just from reading the error, “ie.map is not a function”, as jsdisco is saying, that means that ie is defined but doesn’t have that method. That means it is not an Array. It could be an object, or any primitive other than undefined or null (since it is not throwing a null pointer exception.)

Not sure where ‘ie’ is coming from… You’re passing a prop called ‘events’ to the ‘some-component’ component. You should be able to access and map over the prop inside the component using this.props.events. Hope this HALPS.

Another, probably unrelated, problem is the name “some-component”. I think classes are required to be PascalCase, so I would expect “SomeComponent”.

I was able to solve it.