CODEWITHSUNDEEP
reactjs
RamTeja
RamTeja

Reputation: 43

How to concatenate first name and last name in ReactJS?

FirstName:

handleFirstName(e) {
      let value = e.target.value;
      this.setState(prevState => ({
        newUser: {
          ...prevState.newUser,
          name: value
        }
      }));
    }

LastName:

handleLastName(e) {
    let value = e.target.value;
    this.setState(prevState => ({
      newUser: {
        ...prevState.newUser,
        name: value
      }
    }));
  }

How to concatenate first name and last Name in React js ?can someone help me what will be the method for fullName?

Upvotes: 1

Views: 6515

Answers (2)

geniusme
geniusme

Reputation: 9

Here's maybe what you're looking for :

this.setState(prevState => ({ fullName: [...prevState.fullName, { firstName: "", lastName: "" }]

Note that fullName should be like this :

    fullName: [{firstName: "", lastName: ""}],

Upvotes: 0

Aamin Khan
Aamin Khan

Reputation: 722

There are several ways of getting the fullName, other than adding into name in your method you can add into firstName and lastName, and then write a method getFullName() to access it, also make sure you have the newUser defined in the state

import React, { Component } from "react";

class User extends Component {
  state = {
    newUser: { firstName: "", lastName: "" }
  };
  handleFirstName(e) {
    let value = e.target.value;
    this.setState(prevState => ({
      newUser: {
        ...prevState.newUser,
        firstName: value
      }
    }));
  }
  handleLastName(e) {
    let value = e.target.value;
    this.setState(prevState => ({
      newUser: {
        ...prevState.newUser,
        lastName: value
      }
    }));
  }

  getFullName() {
    return this.state.newUser.firstName + " " + this.state.newUser.lastName;
  }

  render() {
    return (
      <div>
        <input
          type="text"
          onChange={this.handleFirstName.bind(this)}
          placeholder="Enter first Name"
        />
        <input
          type="text"
          onChange={this.handleLastName.bind(this)}
          placeholder="Enter last Name"
        />
        FullName: {this.getFullName()}
      </div>
    );
  }
}
export default User;

You can play it here https://codesandbox.io/s/z6422kkvx4

Upvotes: 3

Related Questions