CODEWITHSUNDEEP
javascriptreactjs
G.Acikgoz
G.Acikgoz

Reputation: 61

React component not rendering props coming from parent

 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)

Upvotes: 5

Views: 11096

Answers (3)

G.Acikgoz
G.Acikgoz

Reputation: 61

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

Upvotes: 1

Shubham Khatri
Shubham Khatri

Reputation: 282040

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

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

Upvotes: 0

Arpit Aggarwal
Arpit Aggarwal

Reputation: 29316

As foo is a function, you have to pass to child component 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)
    }

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

Upvotes: 0

Related Questions