props are undefined inside componentwillmount but shown inside render in typescript?

Question

When props data are passed as props then it's undefined inside componentWillMount but defined inside render. What might be the problem??? render:

 public state: any = {
    authority: [],
    cid: "1",
    data: [],
    id: [],
    menuTitle: []
};
public componentWillMount() {
    var temp: any;
    let url: String = "http://localhost:9000/getFieldTitle/";
    fetch(url + this.state.cid + "")
        .then((response) => response.text()).then((value) => {
            let jsonObject = JSON.parse(value);
            for (let index in jsonObject) {
                for (let header in jsonObject[index]) {
                    temp = [];
                    if (header === "id") {
                        temp = this.state.id;
                        temp.push(jsonObject[index][header])
                        this.setState({ id: temp })
                    }
                    if (header === "menuTitle") {
                        temp = this.state.menuTitle;
                        temp.push(jsonObject[index][header])
                        this.setState({ menuTitle: temp })
                    }
                    if (header === "dataFormat") {
                        temp = this.state.data;
                        temp.push(jsonObject[index][header])
                        this.setState({ data: temp })
                    }
                    if (header === "authority") {
                        temp = this.state.authority;
                        temp.push(jsonObject[index][header])
                        this.setState({ authority: temp })
                    }
                }
            }
        })
        .catch(e => console.log(e));

}
public render() {
    let row = []
    for (let i = 0; i < this.state.authority.length; i++) {
        row.push(<FormSection
                key={i}
                id={this.state.id[i]}
                cid={this.state.cid[i]}
                menuTitle={this.state.menuTitle[i]}
                data={this.state.data[i]}
                />
        )
    }
    return (
        <div className="container-fluid">
            {row}
        </div>
    );
}

FormSection.tsx:

<MenuSectionStructure data={this.props.data} check="check" />

MenuSectionStructure.tsx:

import * as React from "react";

export class MenuSectionStructure extends React.Component<any, any> {
    public state: any = {
        authority: [],
        dataType: [],
        fieldName: [],
    };

    constructor(props: any) {
        super(props);
    }

    public componentWillMount() {
       console.log(this.props.data) // Gives undefined
    }

    public render() {
        return (
            <div>{this.props.data}</div>  //Gives value of this.props.data
        );
    }

}

I have shown all data

Answer 1

Yes, I found the answer by sending the whole data as a single props and then parsing at the lowest component so that i could display all objects as a props in component as required. The problem was with sending multiple data as props and choosing one props as props length in loop which cause all problem since they all were all array and set state was hitting randomly causing the loop with unwanted sequence. However, sending the whole data as a single props and then looping inside came as a solution to my problem. Thanks all for your contribution, which help me allot to visualize the reason of the scenario.

Answer 2

I think that your problem is definitely the one Max Sidwani commented. When you first load the parent component, you launch various setState in componentDidMount. Probably the header authority goes before the dataFormat one. This means that your component will re-render (and all its children) twice. The first time, authority.length will be an integer bigger than 0 and so the render will loop and try to render FormSection components where the data prop will be undefined because the dataFormat header hasn't already been processed and the data state is still []. Then, the data state is set and in the second re-render the data is not undefined. You can't watch two renders because the first one renders nothing and the second one happens inmediately after, but since you are using setState twice, render is being called twice (the first time with authority set and the second with data set). You can probably check this out with:

public componentWillUpdate() {
       console.log(this.props.data) // Not undefined
    }

in the MenuSectionStructure component.

You can solve it by setting both states at the same setState at the initial fetch or checking if data is not empty in the render.