Rendering JSON child list from object list in ReactJS

Question

I have JSON data like this. I want to render the child object title. But it says "index.js:1 Warning: Each child in a list should have a unique "key" prop."

[
  {
    "title": "Components",
    "children": [
      {
        "title": "Buttons",
        "url": "url"
      }
    ]
  },
  {
    "title": "Components",
    "children": [
      {
        "title": "Buttons",
        "url": "url"
      }
    ]
  }
]

How can I get children title? {data.children.title} does not work.

const items = data.map(data => {
        return(
            <div>
                <ul>
                    <li>
                        <span>{data.title}</span>
                        <span>{data.children.title}</span>
                    </li>
                </ul>
            </div>
        )
    });

    return items;

Answer 1

Assuming your children sub array always has at least one item, then you could render the title of the first child item of the current data object by the following:

data.children[0].title

In your render code, that'd look like this:

const items = data.map((data, idx) => (
    <div key={idx}>
        <ul>
            <li>
                <span>{data.title}</span>
                <span>{data.children[0].title}</span>
            </li>
        </ul>
    </div>));

return items;

For a more robust alternative, you could check for the existance of an item in the children sub-array before rendering by adding chaining a call to filter() into your rendering logic:

const items = data
/* If children sub-array is non-empty, then it is included
for rendering */
.filter(data => data.children.length > 0)
/* Map any data items that pass filtering */
.map((data, idx) => (
    <div key={idx}>
        <ul>
            <li>
                <span>{data.title}</span>
                <span>{data.children[0].title}</span>
            </li>
        </ul>
    </div>));

return items;

Note also, I've include the key prop on each div that has been mapped of each mapped as is required when rendering lists, which should resolve the warning that you're seeing in the console. Hope that helps!

Update

To render all children per data object as a sub-list inside of the ul you could do so via an inner mapping of data.children to <li> elements like this:

const items = data
.filter(data => data.children.length > 0)
.map((data, idx) => (
    <div key={idx}>
        {/* 
        I'm assuming data.title should exist outside of 
        children list 
        */}
        <span>{data.title}</span>
        <ul> 
        {   data
            .children
            .map((child, jdx) => (
            <li key={jdx}>
                <span>{child.title}</span>
            </li>))
        }
        </ul>
    </div>));