Getting error while trying to render array of object in react js

Question

Uncaught Error: Objects are not valid as a React child (found: object with keys {titlesCollection}). If you meant to render a collection of children, use an array instead

I am getting this error while trying to render array of object, what I am doing wrong here?

import * as React from 'react';
import * as FontAwesomeIcon from 'react-fontawesome';
const data = {
  otherTitles:[
        {
            titleHeading:"X",
            titles:["A","B","C","D"]
        },
        {
            titleHeading:"Y Z",
            titles:["E","F","G","H"]
        }        
    ]
}

export class OtherTitlesCollection extends React.Component{

  render() {
    const titlesCollection = data.otherTitles.map((othertitle)=>{
        let dataId = othertitle.titleHeading.replace(' ','');
        return(
            <div key={dataId}>
                <div>
                    <FontAwesomeIcon name='plus-circle' data-toggle="collapse"
                    data-target={"#"+dataId} role="button" aria-expanded="false" aria-controls={dataId}/>
                    <label>{othertitle.titleHeading}</label>
                </div>
                <div  className="collapse" id ={dataId}>
                    {
                        othertitle.titles.map((title)=>{
                            return(<div key={title} style={{margin: "1px auto 1px 10px"}}>{title}</div>);
                        })
                    }
                </div>
            </div>
        )
    });
    return (
        {titlesCollection}
    );
  }
};

Shubham Khatri · Accepted Answer · 2018-03-19 06:47:52Z

2

The problem occurs because you try to render

return (
    {titlesCollection}
);

now since you did not wrap titlesCollection within a div, span or Fragment, it is assumed to be an object like

return (
     {titlesCollection: titlesCollection}
);

and hence you get an error, now that titlesCollection will be an array you can use React.Fragment like

return (
     <React.Fragment>
         {titlesCollection}
     </ React.Fragment>
);

or you can add a div around titlesCollection like

return (
     <div>{titlesCollection}</div>
);

or simply return titlesCollection like

return titlesCollection;

answered Mar 19, 2018 at 6:47

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

Comments

Harsh Makadia · Accepted Answer · 2018-03-19 06:41:55Z

Here is working example

import React from 'react';
const data = {
    otherTitles:[
        {
            titleHeading:"X",
            titles:["A","B","C","D"]
        },
        {
            titleHeading:"Y Z",
            titles:["E","F","G","H"]
        }
    ]
}

class TestJS extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {

        let sample = [];
        let sampleData = data.otherTitles;

        for (let i = 0; i < sampleData.length; i++) {
            sample.push(
                <div key={i}>{sampleData[i].titleHeading} - {sampleData[i].titles}</div>
            )
        }

        return(
            <div id="root">
                <p>Hello world</p>
                <div>{sample}</div>
            </div>

        );
    }
}

export default TestJS;

Nisarg Thakkar · Accepted Answer · 2018-03-19 06:42:04Z

import * as React from 'react';
import * as FontAwesomeIcon from 'react-fontawesome';
const data = {
  otherTitles:[
        {
            titleHeading:"X",
            titles:["A","B","C","D"]
        },
        {
            titleHeading:"Y Z",
            titles:["E","F","G","H"]
        }        
    ]
}

export class OtherTitlesCollection extends React.Component{

  render() {
    return data.otherTitles.map((othertitle)=>{
        let dataId = othertitle.titleHeading.replace(' ','');
        return(
            <div key={dataId}>
                <div>
                    <FontAwesomeIcon name='plus-circle' data-toggle="collapse"
                    data-target={"#"+dataId} role="button" aria-expanded="false" aria-controls={dataId}/>
                    <label>{othertitle.titleHeading}</label>
                </div>
                <div  className="collapse" id ={dataId}>
                    {
                        othertitle.titles.map((title)=>{
                            return(<div key={title} style={{margin: "1px auto 1px 10px"}}>{title}</div>);
                        })
                    }
                </div>
            </div>
        )
    });
   }
};

Please try upper code this will work for you and issue here is you try to return titlesCollection variable and it will not contain proper data when it was return so we will direct return looping data

illiteratewriter · Accepted Answer · 2018-03-19 06:46:00Z

0

Just put <div> around {titlesCollection}.

return (
  <div>{titlesCollection}</div>
);

answered Mar 19, 2018 at 6:46

illiteratewriter

4,3532 gold badges26 silver badges46 bronze badges

Collectives™ on Stack Overflow

Getting error while trying to render array of object in react js

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related