Pushing an element into an object

Question

I'm new to React, but I'm pretty sure this question is more related to Javascript than React. I want to push a custom element into an object that has already been made in React, without triggering a forceUpdate().

I want to push fullName to the person object. so I can access it in React like this, this.state.person.fullName rather than this.state.fullName.

Now I know I could do: this.state.person.fullName = this.formatName(person.name).

But that requires forceUpdate() to trigger a re-render., which is not the recommended way I think.

class Person extends React.Component {
    constructor(props) {
        super(props);
        this.url = "https://randomuser.me/api";
        this.state = {
            person: {
                fullName: '',
            },

        };

        this.generate = this.generate.bind(this);
    }

    formatName(name) {
        // Mr.Jon Snow
        return `${name.title}.${name.first} ${name.last}`;
    }
    generate() {
        axios.get(this.url).then(response => {
            var person = response.data.results[0];
            this.setState({
                person: person,
                fullName: this.formatName(person.name)
            });
        });
    }
    render() {
        return (
            <div>
                <button onClick={this.generate}>Generate</button>
                <div className="card">
                    <h3>The person's information</h3>
                    <div className="person-name">Name: {this.state.fullName}</div>
                    <div className="person-dob">Date of Birth: {this.state.person.dob}</div>
                    <div className="person-email">Email: {this.state.person.email}</div>
                    <div className="person-phone">Phone Number: {this.state.person.phone}</div>
                </div>
            </div>
        )
    }
}

ReactDOM.render(<Person />, document.getElementById('app'));

Answer 1

var person = response.data.results[0];
person.fullName = this.formatName(person.name);
this.setState({
    person: person,
});

Answer 2

You can use ES6 Spread Syntax to make the change as you requested.

Example

this.setState((prevState) => ({
  person: {
    ...prevState.person,
    fullName: this.formatName(person.name)
  }
}))

Update (I misunderstood the problem. This is more relevant to the question)

let person = response.data.results[0];
person["fullName"] = this.formatName(person.name);
this.setState({
  person: person
});

Answer 3

You can use Object.assign() method in order to achieve your requirement.

var person = response.data.results[0];
Object.assign(person,{"fullName": this.formatName(person.name)};
this.state = {
     person: person
};