React component not rendering props coming from parent

Question

 class CyInfo extends Component {

    foo(){
        console.log(this.props.id);
        return getAttributes(this.props.id)
    }

    render() {
        return ( <Info data = {this.foo()}> </Info>)
    }
}

this parent receive "props.id" and pass data value to children which is returned by getAttributes().

export default class Info extends Component {
    constructor(props){
        super(props)
    }

    /*componentWillReceiveProps(nextProps){
        console.log(nextProps);
    */

    render() {
        console.log(this.props.data);
        return (
            <div id="info">{this.props.data}</div>
        )
    }
}

On child i can see props value on the console and in componentWillReceiveProps also.But array not rendering. I try the use react-devtool. In react-devtool props seems passes the children but not rendering. Interestingly in react-devtool when i change the some of array's element array is rendering.

What did i do wrong.

EDIT: [React-Devtool Screenshot][1]

I edited the react-devtool screenshot. Props are seems but component only renders initial value. In screenshot console error is favicon just ignore this

EDIT2:Console prints props array

EDIT 3: JSON.stringify(this.props.data)

Answer 1

The props are coming from function(getattributes) which is call a method asynchronous and when this props passed the child there are not rendering. I call async method directly in parent child and set state with callback in componentWillReceiveProps:

componentWillReceiveProps(nextProps){
    self = this;
    AsyncFunc(nextProps.id ,(error, result) => {
        self.setState({data:result})
    });
}

and render with

    return (<div id="info">
        {Array.isArray(this.state.data) && this.state.data.map((data) => {
            return <div key={data._id}>{data.class}{data.predicate}{data.yuklem}</div>
        })}</div>
    )