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

    /*ponentWillReceiveProps(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 ponentWillReceiveProps 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 ponent 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)

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

    /*ponentWillReceiveProps(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 ponentWillReceiveProps 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 ponent 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)

• javascript
• reactjs

• Do u see any errors/warnings on console ? what is the data passed ? its an array.. what kind of array.. whatt are you trying to display ? – Panther Commented May 28, 2017 at 16:03
• Try {JSON.stringify(this.props.data)}. The reason why it might not be showing is because it's not text, but a JavaScript object. – Adam Recvlohe Commented May 28, 2017 at 16:10
• i edited the question with react-devtool and console screenshots – G.Acikgoz Commented May 28, 2017 at 17:10

3 Answers 3

The props are ing 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 ponentWillReceiveProps:

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

As foo is a function, you have to pass to child ponent as:

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

Also, data is an array, you have to render using .map(), as follows:

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

    /*ponentWillReceiveProps(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>
        )
    }
}

As you have mentioned that this.data.props returns an array, and in order to render elements within an array, you need to map over the array elements and also check that the data is an array or not before rendering as initially the value may not be available or not an array

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

    /*ponentWillReceiveProps(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>
        )
    }
}