CODEWITHSUNDEEP
javascriptreactjs
Jessica Robertson
Jessica Robertson

Reputation: 427

failed to get state value in render of jsx

render() {
    const { params } = this.props;
    const actionId = params.id;

    console.log(actionId) // has value

    return(
        <div>
           {this.actionId}
        </div>
    )
 }

I don't see any output with above code, I wonder why. I can see the value in the console. What's wrong?

Upvotes: 0

Views: 59

Answers (3)

Alexandre_Cbt
Alexandre_Cbt

Reputation: 41

Yes I agree with the above answer. But why don't you just do that ? :

render() {

 console.log(this.props.id) // has value

 return(
     <div>
        {this.props.id}
     </div>
  )
}

I think that using params as an alias on this.props will be confusing for other developers, if you share your project in the future. And you complicate your code for nothing.

Upvotes: 1

Mayank Shukla
Mayank Shukla

Reputation: 104369

You are already storing the params.id in actionId variable, so use it directly, remove this keyword, like this: 

render() {
    const { params } = this.props;
    const actionId = params.id;

    console.log(actionId) // has value

    return(
        <div>
           {actionId}
        </div>
    )
 }

Upvotes: 2

Vladu Ionut
Vladu Ionut

Reputation: 8193

this.actionId is not defined in your context , this is refer to the component in self

render() {
    const { params } = this.props;
    const actionId = params.id;

    console.log(actionId) // has value

    return(
        <div>
           {actionId}
        </div>
    )
 }

Upvotes: 1

Related Questions