Can not map array inside json in React

Question

I have a simple json with nested array: {"pageIndex":1,"items":[{"id":1,"name":"name1"},{"id":2,"name":"name2"}],"hasPage":false}

I try to map items for the table rendering:

import React from 'react'

const TableBody = props => {
    const rows = props.characterData.map((row, index) => {
        return (
            <tr key={index}>
                <td>{row.id}</td>
                <td>{row.name}</td>
            </tr>
        )
    })

    return <tbody>{rows}</tbody>
}

const Table = props => {
    const { characterData } = props

    return (
        <table>
            <TableBody characterData={characterData} />
        </table>
    )
}

export default Table

with

import React, { Component } from 'react'
import Table from './Table'

class App extends Component {
    state = {
        characters: [],
    }

  componentDidMount() {
    const url =
      'http://mysitename.com/api/characters'

    fetch(url)
      .then(result => result.json())
      .then(result => {
        this.setState({
          characters: result,
        })
      })
  }

    render() {
        const { characters } = this.state

        return (
            <div className="container">
                <Table characterData={characters} />
            </div>
        );
    }
}

export default App

But I give an error: TypeError: props.characterData.map is not a function, this code works only for not nested array in json.

When I change to this: const rows = props.characterData.items.map((row, index) => { I have an error TypeError: Cannot read property 'map' of undefined I see in react console that characterData.items in TableBody have values. But why I can not map them? And why items are undefined?

I haven't tried but it's probably because you're rendering the table before getting data from the fetch api — Tough Stick
– Tough Stick, Commented Jul 8, 2020 at 8:48
{characters.length > 0 ? <Table characterData={characters} /> : null} maybe this will help — Germa Vinsmoke
– Germa Vinsmoke, Commented Jul 8, 2020 at 8:49
Should be mapping over items inside of characterData instead of characterData itself. — Siddharth Seth
– Siddharth Seth, Commented Jul 8, 2020 at 8:50

T.J. Crowder · Accepted Answer · 2020-07-08 08:53:00Z

The problem is that the shape of the data you're receiving is an object with an items array:

{
    "pageIndex": 1,
    "items": [
        {
            "id": 1,
            "name": "name1"
        }, {
            "id": 2,
            "name": "name2"
        }
    ],
    "hasPage": false
}

...but your initial state is just an aray:

state = {
    characters: []
}

So what works with the initial state won't work with what you're saving later.

If all you want from the ajax response is the items, you can fix it by keeping your initial state the way it is and changing what you do with the response:

fetch(url)
  .then(result => result.json())
  .then(result => {
    this.setState({
      characters: result.items,
//                      ^^^^^^
    });
  });

(Then continue to use props.characterData.map directly.)

Alternatively, you could go the other way:

Keep the full ajax result

Make your initial state something like:

state = {
    characters: {
        items: []
    }
}

Use .items when passing the data to Table.

There are two unrelated additional issues to fix:

You're not handling errors from fetch, and
You're not handling the fact that fetch only raises an error on network error, not on HTTP error; you need to check for HTTP success explicitly

So:

fetch(url)
  .then(result => {
      if (!result.ok) {                                    // 
          throw new Error("HTTP error " + result.status);  // Check for HTTP success
      }                                                    // 
      return result.json();
  })
  .then(result => {
    this.setState({
      characters: result.items,
    });
  })
  .catch(error => {                                        //
    // ...handle/report the error...                       // Handle/report errors (network or HTTP)
  });                                                      //

Collectives™ on Stack Overflow

Can not map array inside json in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related