React Hooks: How to get data from array of objects?

Question

I have the array of objects which contain components and title now I would like to display these components based on id passed in URL parameters I can do that if its just array using find function, unfortunately, I can't figure how to do the same with an array of objects,

Here is part of my code

  //array of objects
 const templates =[
  {
    title: "TemplateOne",
    component: TemplateOne,
  },
  {
    title: "TemplateTwo",
    component: TemplateTwo,
  }]

 //find the component and match the id passed in URL parameters
let SelectedComponent = templates.find(function (Component, idx) {
    if (idx === Number(templateId)) {
      return true;
    }
    return false;
  });`

And I display the components like this

<div>
  <SelectedComponents />
</div>

But I get an error as follows

index.js:1 Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

What do I need to change to get this working as expected?

Samathingamajig · Accepted Answer · 2021-06-10 01:03:00Z

1

The value of SelectedComponent will be an object with title and component properties. You need to render just the component, and maybe pass in the title property if you wish.

//array of objects
const templates = [{
    title: "TemplateOne",
    component: TemplateOne,
}, {
    title: "TemplateTwo",
    component: TemplateTwo,
}]

//find the component and match the id passed in URL parameters
const {component: SelectedComponent, title} = templates.find(function(Component, idx) {
    if (idx === Number(templateId)) {
        return true;
    }
    return false;
}) ?? {};

return (<div>
  {SelectedComponent && <SelectedComponent title={title} />} {/* Or don't include the title prop if you don't need to */}
</div>);

edited Jun 10, 2021 at 1:03

answered Jun 10, 2021 at 0:53

Samathingamajig

13.5k3 gold badges19 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

charlietfl Over a year ago

One hiccup will be if an invalid templateId gets entered in url

Reinis Over a year ago

Yes, it needs to process validation when templateId doesn't match idx

Samathingamajig Over a year ago

@charlietfl fixed with &&

The Dead Man Over a year ago

Thanks, its working now there is no error and and components are displayed as expected, I will accept it

Reinis · Accepted Answer · 2021-06-10 01:08:07Z

1

In react, the component's name should start with UpperLetter, and Array.prototype.find() function returns one element of Array. i.e {title: 'blabla...', component: Blablaba} So we need the component child as named as "Component" or UpperLetter leading Variable. In here we can use it as following.

//array of objects
const templates = [
    {
      title: 'TemplateOne',
      component: TemplateOne,
    },
    {
      title: 'TemplateTwo',
      component: TemplateTwo,
    },
  ];
  const templateId = 4;
  //find the component and match the id passed in URL parameters
  const { component: Component } =
    templates.find((Component, idx) => {
      return idx === +templateId;
    }) || {};
  return <div>{Component && <Component />}</div>;

edited Jun 10, 2021 at 1:08

answered Jun 10, 2021 at 0:56

Reinis

5051 gold badge5 silver badges13 bronze badges

2 Comments

The Dead Man Over a year ago

Thanks for the explanation and solution , also it works upvoted because its usefully one

Samathingamajig Over a year ago

You should add ?? {} at the end of the line below the return false; line, since Array.prototype.find returns undefined if there is no element found, and attempting to destructure from undefined throws an error. Destructing properties that aren't in an object doesn't throw an error, so using the null coalescence operator (??) can fix that

Collectives™ on Stack Overflow

React Hooks: How to get data from array of objects?

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related