React redux — input field not letting me type

Question

So I have 3 input fields, one for name, email and password. The email and password input field are working fine, but the name input field is not letting me type anything. I have the values for the input fields set to come from user, so it auto-fills the fields. Here is my code

    import React, {useState, useEffect} from 'react';
    import {useParams} from 'react-router-dom';
    import {connect} from 'react-redux';
    import {editUserData, fetchUserData, deleteProfile} from '../actions/index';

    const EditUser = props => {
        const [user, setUser] = useState({name: '', email: '', password: ''})
        const params = useParams();
        
        const editUser = e => {
            e.preventDefault();
            props.editUserData(params, user);
        }

        const handleChanges = e => {
            e.persist();
            setUser({...user, [e.target.name]: e.target.value});
        }

        useEffect(() => {
            props.fetchUserData(params, setUser);
        }, [])

        const deleteOnClick = () => {
            props.deleteProfile(params)
        }
        
            return (
                <>
                <form className='editUserForm' onSubmit={editUser}>
                    <h3>Edit Profile !</h3>
                    <div>Name</div>
                    <input className='editInput' type='text' name='name' value={`${user.firstName} ${user.lastName}`} onChange={handleChanges} /> 
                    <div>Email</div>
                    <input className='editInput' type='text' name='email' value={user.email} onChange={handleChanges} />
                    <div>Password</div>
                    <input className='editInput' type='text' name='password' value={user.password} onChange={handleChanges} />
                    <button className='submitButton'>Submit</button>
                </form>
                <div className='deleteProfile'>
                    <button className='deleteProfileButton' onClick={deleteOnClick}>Delete Profile</button>
                </div>
                </>
            )
    }

    const mapStateToProps = state => {
        return {
            users: [], 
            user: {}, 
            registerSuccessMessage: '',
            user_stories: {}, 
            isLoading: false, 
            error: null 
        }
    }

    export default connect(mapStateToProps, {editUserData, fetchUserData, deleteProfile})(EditUser);

Edit (after the suggestion of @Boussadjra)

This is what state looks like after props.fetchUserData. -- where setUser is -- That is why I have input values to ${user.firstName} ${user.lastName}

Answer 1

user.firstName and user.lastName are undefined they are not defined as properties in your user state, so you should simply use the firstName and lastName properties as value :

 value={ us}

or define your state as follows :

 const [user, setUser] = useState({firstName:'',lastName:'', email: '', password: ''})

we suppose that the first and the last name are separated by space so when you come to update the state split that name :

  const handleChanges = e => {
        e.persist();
       if(e.target.name==='name'){
           let name=e.target.value.split(' ')
           setUser({...user, firstName:name[0],lastName:name[1]});
        }else{
        setUser({...user, [e.target.name]: e.target.value});
        }
    }

Answer 2

That's because you are setting the "name" input 's value to ${user.firstName} ${user.lastName} , which are undefined . You could set your user state to initially have these properties, but I would suggest using separate useState() 's for each of firstName , lastName , email , and password (since combining first and last names in a single input is prone to errors, as mentioned in the comments):

 import React, {useState, useEffect} from 'react'; import {useParams} from 'react-router-dom'; import {connect} from 'react-redux'; import {editUserData, fetchUserData, deleteProfile} from '../actions/index'; const EditUser = props => { const [firstName, setFirstName] = useState(''); const [lastName, setLastName] = useState(''); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const params = useParams(); const editUser = e => { e.preventDefault(); props.editUserData(params, user); } useEffect(() => { props.fetchUserData(params, setUser); }, []) const deleteOnClick = () => { props.deleteProfile(params) } return ( <> <form className='editUserForm' onSubmit={editUser}> <h3>Edit Profile !</h3> <div>First Name</div> <input className='editInput' type='text' name='firstName' value={firstName} onChange={e => setFirstName(e.target.value)} /> <div>Last Name</div> <input className='editInput' type='text' name='lastName' value={lastName} onChange={e => setLastName(e.target.value)} /> <div>Email</div> <input className='editInput' type='text' name='email' value={email} onChange={e => setEmail(e.target.value)} /> <div>Password</div> <input className='editInput' type='text' name='password' value={password} onChange={e => setPassword(e.target.value)} /> <button className='submitButton'>Submit</button> </form> <div className='deleteProfile'> <button className='deleteProfileButton' onClick={deleteOnClick}>Delete Profile</button> </div> </> ) } const mapStateToProps = state => { return { users: [], user: {}, registerSuccessMessage: '', user_stories: {}, isLoading: false, error: null } } export default connect(mapStateToProps, {editUserData, fetchUserData, deleteProfile})(EditUser);