.map() to iterate an arrays of objects

Question

I have attempted a nested approach which is able to display in the console log but unable in the main Tsx page in react.

The data structure is as follows

• array[0]={title:"abc", url:"abc.com"};
• array[1]={title:"abcd", url:"abcd.com"};

    this.array.map(this.array.map(i => console.log(i.title, i.url)));

main.tsx

public render(): React.ReactElement<IAProps> {
    let render;
    if (this.props.lists) {
      render = this.props.lists.map(
        this.props.lists.map(i => (
          <li>
            <a href={i.url} target="_blank">
              {i.title}
            </a>
          </li>
        ))
      );
    }
return(
  {render}
)
}

I get sp-webpart-workbench-assembly_en-us_3a7c7940cb718e67c2b0e6edfd5b40ff.js:21 Uncaught TypeError: [object Array] is not a function

Answer 1

Based on the given data, you don't need a nested map function. You can achive this with the single map.

Example:

public render(): React.ReactElement<IAProps> {
    let render;
    if (this.props.lists) {
        this.props.lists.map(i => (
          <li>
            <a href={i.url} target="_blank">
              {i.title}
            </a>
          </li>
        ))
    }
return(
  {render}
)
}

But for some reason if you want a nested map then you have to call the nested map inside the first map function's callback.

public render(): React.ReactElement<IAProps> {
    let render;
    if (this.props.lists) {
      render = this.props.lists.map( item => (
        this.props.lists.map(i => (
          <li>
            <a href={i.url} target="_blank">
              {i.title}
            </a>
          </li>
        ))
      ));
    }
return(
  {render}
)
}

Answer 2

The outer map call expects a function, and you’re passing it the result of the inner map, which returns an array, not a function.