0

So for the practice I am trying to consume rest point with react framework. But somehow I getting error like:

TypeError: Cannot read property 'map' of undefined

Json look like this:

{  
   "name":"sadasd.tx",
   "application":"Word",
   "id":"123",
   "type":"Mixed",
   "containers":[  
      "Variant1",
      "Variant2_sch",
      "Variant5",
      "Variant6",
      "Variant3",
      "Variant4"
   ]
}

React component looks like this:

class ContainerList extends React.Component{

    constructor(props){
        super(props);
        this.state={fileContent: []};
    }

    componentDidMount(){   
        fetch('http://localhost:8080/'+ this.props.file)
            .then(res => res.json())
            .then((data) => {
                        this.setState({fileContent: data})
        })
    }

    render() {
        const containerNames = this.state.fileContent.containers.map(container => <Container containerName={container} />);

        return (
            <table>
                <tbody>
                    {containerNames}
                </tbody>
            </table>
        )
    }
}

After removing map over array and debugging in browser I see that json object is correctly assigned to the variable. But when iterating over it I getting undefined error. Anyone has idea what might be wrong?

[EDIT] I am completely does not understand this. I did understand why does it throwing this error, after your posts guys. But I did something like this after reading your answers:

I added to state another variable isLoading with default true value. And in fetch after getting json I set it to false.

fetch('http://localhost:8080/'+ this.props.xx)
        .then(res => res.json())
        .then((data) => {
                    this.setState({fileContent: data, isLoading: false})
    })

and in render method I did add if statement:

render() {
        let containerNames;

        if(this.state.isLoading){
            containerNames = <h1>Loading</h1>

        }else{
            containerNames = this.state.fileContent.listContainers.map(listContainer => <Container listContainerName={listContainer} />);
        }

        return (
            <table>
                <tbody>

                    {containerNames}
                </tbody>
            </table>
        )

So it should not be possible to enter else statemend before fetchind data. But react is somehow doing this. And throwing error.

1
  • If render() is called before the fetch() completes, that fileContent object will be empty. Commented Jun 13, 2019 at 16:31

2 Answers 2

2

During initial render value of this.state.fileContent.containers will be undefined, and undefined do not have map method

You add check before map

const containerNames = Array.isArray(this.state.fileContent.containers) && this.state.fileContent.containers.map(
Sign up to request clarification or add additional context in comments.

1 Comment

You are right, I did add this check. It helps with the error,. But component does not rerender after data is loaded
0
const { fileContent } = this.state
const { containers } = fileContent
const containerName = containers ? containers : []

like the other answers mentioned, containers doesn't exist during the initial render. here i did some desconstructing for personal preferences, but i'm just stating if containers exist, then map over it, otherwise map over an empty array

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.