0

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

5
  • In the UserLabel component you used this.state.name instead of this.state.user.name
    – raphalg
    Jan 26, 2021 at 10:43
  • thanks it's a typo, still have problem
    – YornLetard
    Jan 26, 2021 at 10:53
  • Are you sure the creator_id field exist on the claim object? What do you get when you console.log the claim object?
    – raphalg
    Jan 26, 2021 at 11:57
  • If i put a console.log() in componentDidMount() method and console output : claim: created_at: "2021-01-26T08:47:51.000000Z" creator_id: 1 description: "sdcsdcsdc" id: 4 status: 0 title: "sdcvsdc" updated_at: "2021-01-26T08:47:51.000000Z"
    – YornLetard
    Jan 26, 2021 at 13:00
  • Could you please console.log the props passed to UserLabel ? Just to see what props are actually passed. You do it once in the constructor and once in the componentDidMount() method
    – raphalg
    Jan 26, 2021 at 13:29

1 Answer 1

1

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] }
 
4
  • hi! in console output i have: GET 127.0.0.1:8001/api/users/undefined 500 (Internal Server Error). props is never passed to componentDidMount() function
    – YornLetard
    Jan 26, 2021 at 10:58
  • I put a console.log(userId); in componentDidMount () , console output say "userId" is undefined
    – YornLetard
    Jan 26, 2021 at 11:01
  • Thanks hthanguyen ! it's working, I updated render method according to your solution : {this.state.claim.creator_id && <UserLabel id={this.state.claim.creator_id} />}
    – YornLetard
    Jan 26, 2021 at 14:09
  • 1
    You should take it as a best practice, check null/undefined/empty before access its field :D
    – hthanguyen
    Jan 26, 2021 at 14:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.