while this.state is a Javascript object , why is state null even after passing into it a state that has data?

Question

I have the following code (see below)

I want it to display the username which is a combination of firstName and lastName . Why doesn't the below code work ?

I expect it to display

Welcome Daggie Blanqx !

class Header extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            firstName : 'Daggie',
            lastName :  'Blanqx',
            userName : ()=>(this.state.firstName + this.state.lastName)
        }


    }

    render(){
        return(
            <div>
                <p> Welcome {this.state.userName} !</p>
            </div>
            )
    }
}

Answer 1

You are missing with ()

<p> Welcome {this.state.userName()} !</p>

Also no need to define a function for this directly get the result like this

<p>Welcome , {this.state.firstName} {this.state.lastName} !</p>

Answer 2

It seems like you are inserting a function to your state and hence you need to call it to get the result. Generally putting functions like this in the state is not recommended. However, if you still want to go with that approach, try the following:

<p>Welcome , {this.state.userName()} !</p>

An even better approach would be to remove the function from the state and do like this:

getUserName() {
   return this.state.firstName + this.state.lastName
}

And then in your template:

<p>Welcome , {this.getUserName()} !</p>

Answer 3

in your example you are accessing the the function this.state.userName you need to call that like this this.state.userName()
this.state.userName will return the function variable you need to put () at end of your function get return value of the function
You you understood why its not working

Answer 4

It should throw an error because you're trying to interact with the state but state hasn't been initialized yet. For that purposes, use componentDidMount() + prevState or just put it inside render() :

Variant 1 :

import React, { Component } from 'react'

export default class Header extends Component {

    constructor(props) {
        super(props)
        this.state = {
            firstName : 'Daggie',
            lastName :  'Blanqx'
        }


    }

    render() {
        return(
            <div>
                <p> Welcome {this.state.firstName + this.state.lastName} !</p>
            </div>
            )
    }
}

Variant 2 :

import React, { Component } from 'react'

export default class Header extends Component {

    constructor(props) {
        super(props)
        this.state = {
            firstName : 'Daggie',
            lastName :  'Blanqx',
            fullName: ''
        }
    }
    componentDidMount() {
      this.setState(prevState => ({
        fullName: prevState.firstName + prevState.lastName
      }))
    }

    render() {
        return(
            <div>
                <p> Welcome {this.state.fullName} !</p>
            </div>
            )
    }
}