React Js Split a Full Name Into First and Last

React Js Split a Full Name Into First and Last Name: In React.js, splitting a full name into first and last names can be achieved by using JavaScript's built-in string manipulation methods. First, you can store the full name in a variable. Then, you can use methods like split to divide the name into an array of words, assuming that the last word is the last name. The first name can be obtained by accessing the first element of the array, and the last name can be obtained by joining the remaining elements back into a string. This way, you can efficiently parse and separate a full name into its constituent first and last names within a React component.

written

reviewed

updated

How can you use ReactJS to split a full name into its first and last name components?

This ReactJS code defines an app that splits a full name into its first, middle (if present), and last name. It uses React's useState to manage the name states. When a user enters their full name in an input field, the handleNameChange function splits the name into parts. If there are two parts (first and last), it sets those states. If there are three or more parts, it includes a middle name. The app dynamically updates and displays the parsed names. The HTML structure consists of an input field and displays for first, middle, and last names

React Js Split A Full Name Into First And Last Example

  <script type="text/babel">
    const { useState } = React;
    function App() {
      const [fullName, setFullName] = useState('');
      const [firstName, setFirstName] = useState('');
      const [middleName, setMiddleName] = useState(''); // New middle name state
      const [lastName, setLastName] = useState('');

      const handleNameChange = (event) => {
        const newName = event.target.value;
        setFullName(newName);

        // Split the full name into first, middle, and last names
        const nameParts = newName.trim().split(' ')
        if (nameParts.length === 2) {
          setFirstName(nameParts[0]);
          setMiddleName(''); // Reset middle name
          setLastName(nameParts[1]);
        } else if (nameParts.length === 3) {
          setFirstName(nameParts[0]);
          setMiddleName(nameParts[1]);
          setLastName(nameParts[2]);
        } else if (nameParts.length > 3) {
          setFirstName(nameParts[0]);
          setMiddleName(nameParts.slice(1, -1).join(' '));
          setLastName(nameParts[nameParts.length - 1]);
        } else {
          setFirstName('');
          setMiddleName('');
          setLastName('');
        }
      };

      return (
        <div className='container'>
          <h3 className='title'>React Js Split A Full Name Into First And Last</h3>
          <input
            type="text"
            placeholder="Enter your full name"
            value={fullName}
            onChange={handleNameChange}
            className='input-field'
          />
          <div className='name-info'>
            {firstName && <p className='name'>First Name: {firstName}</p>}
            {middleName && <p className='name'>Middle Name: {middleName}</p>}
            {lastName && <p className='name'>Last Name: {lastName}</p>}
          </div>
        </div>

      );
    }
    ReactDOM.render(<App />, document.getElementById("app"));
  </script>

Run

Pasted Image

React JS Tutorial

React Js Split a Full Name Into First and Last

Feedback for Abhishek

How can you use ReactJS to split a full name into its first and last name components?

React Js Split A Full Name Into First And Last Example