The React component does not create the details coming from the 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 receives "props.id" and passes the data to these children, which getAttributes () returns.

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>
        )
    }
}

In the child I can see the value of props on the console and in the component WillReceiveProps as well. But the array is not rendering. I am trying to use response-devtool. In the details of response-devtool, the children seem to go through, but not rendering. Interestingly, in response-devtool, when I change some array of array elements, rendering is done.

What did I do wrong.

EDIT: [React-Devtool Screenshot] [1]

I edited the reaction-devtool screenshot. Details look, but the component only gives the initial value. In the screenshot, the console error is an icon that simply ignores this

EDIT2: Console prints an array of details

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

Answer 1

(getattributes), , , . async WillReceiveProps:

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

    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>
    )

Answer 2

foo - , :

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

, , . map(), :

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.map(( element, index ) => {
            console.log(element);
            <span key={index}> {element}</span>})}
           </div>
        )
    }
}

Answer 3

As you already mentioned, it this.data.propsreturns an array, and to render elements inside the array you need to map the elements of the array and also check that data is an array or notbefore rendering, since initially this value may not be available or not an array

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 && Array.isArray(this.props.data) && this.props.data.map((data, index) => {
                      return <div key={index}>{data}</div>
               })}</div>
        )
    }
}

Answer 4

Pass all the details from your componeent parent to the child like this

 class CyInfo extends Component {

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

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

you get your details here

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

    componentWillReceiveProps(nextProps){
        console.log(nextProps); //here you get your props
    }

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