CODEWITHSUNDEEP
javascriptreactjs
YornLetard
YornLetard

Reputation: 29

How to pass props (from fetching object) to child component

I have a main component which fetch a claim object; it is correctly rendered except his child component:

<UserLabel id={this.state.claim.id}/>

which will fetch user name, using passed props.

I can see {this.state.claim.status}, {this.state.claim.created_at}, {this.state.claim.creator_id} rendered in the page; but {this.state.claim.creator_id} is not passed to child component

child component is rendered correctly

If I pass string prop like "1", component is rendering correctly:

<UserLabel id='1'/>

Could you please help me ?

File EditClaim.js

import axios from 'axios'
import React, {Component} from 'react'
import Status from './Status'
import UserLabel from './UserLabel'

class EditClaim extends Component{
    constructor(props){
        super(props)
        this.state = {
            claim: '',
            creator_id:'',
            errors:[]
        }

    }

    componentDidMount () {
        const claimId = this.props.match.params.id
        axios.get(`/api/claims/${claimId}`).then(response => {
            this.setState({
                claim: response.data
            })
        })
    }

    render(){
        return(
            <div className="container py-4">
                <div className="row justity-content-center">
                    <div className="col-md-6">
                        <h1>Réclamation {this.state.claim.id}</h1>
                        <div className="card">
                            <div className="card-header">
                                Suivi <Status status={this.state.claim.status}/> crée le {this.state.claim.created_at} par ({this.state.claim.creator_id})<UserLabel id={this.state.claim.creator_id}/>
                            </div>
                            <div className="card-body">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default EditClaim

File UserLabel.js

import React, {Component} from 'react'
import axios from 'axios'

class UserLabel extends Component{
    constructor(props){
        super(props)
        this.state = {
            user: ''
        }
    }

    componentDidMount () {
        const userId = this.props.id
        axios.get(`/api/users/${userId}`).then(response => {
            this.setState({
                user:response.data
            })
            }
        )
    }

    render(){
        return (
            <div>{this.state.user.name}</div>
        )
    }
}

export default UserLabel

File Status.js

function Status(props){
    if(props === 0){
        return (<button className='btn btn-sm btn-primary'>Nouvelle</button>)
    }else if(props === 1){
        return (<button className='btn btn-sm btn-warning'>En Cours</button>)
    }else{
        return (<button className='btn btn-sm btn-success'>Close</button>)
    }
}

export default Status

Console output

console output

Upvotes: 0

Views: 212

Answers (1)

hthanguyen
hthanguyen

Reputation: 96

You can check by setting debugger/logging at componentDidMount() to check for "userId" in UserLabel.js. Next, checking is response returned correctly. If everything is OK, i guess render part should be

render() { return (<div> {this.state.user && this.state.user.name} </div>) }

After you updating your error, the issue is from React lifecyle. React calls render() method then after rendered, componentDidMount() will be called. So that, at first "creator_id" is undefined which cause the issue.

Solution:

render() { this.state.create_id && [render_part] }

Upvotes: 1

Related Questions