Fill Inputfield automatically

user_15406613 0
Viewed 112

I have a React application and in it I have an input field. I work with Bootstrap. When the user clicks a button, I want the input field to be filled automatically. So at the beginning it should be empty, because the variable name = "" and as soon as the button is pressed the name Max should be in the input field, how do I do that?

My Code

const Profile = () => {

const [name, setName] = useState();
const onClickBack = () => {
    setName('Max');
}


return (
    <div>

          <div className="form-group">
              <div className="col-xs-4">
                <label for="exampleInputName">Name</label>
                  <input
                         type="text"
                         className={name ? "form-control" : "form-control is-invalid"
                        }
                        placeholder={name}
                       onChange={(event) =>
                       setValueName(event.target.value)
                       }  
                       // text = {name} // not working                    
                                                    
                  />
             </div>
           </div>
           <button
              type="button"
              id="submit"
              name="submit"
              className="btn btn-primary submit-button ml-5"
              onClick={onClickBack}
               >
              Back
           </button>

    </div>
);
};

export default Profile;
react-bootstrap bootstrap-4 reactjs javascript
3 Answers

It's quite simple. Use value={name} instead of text={name}

 <input
      type="text"
      className={name ? "form-control" : "form-control is-invalid"}
      placeholder={name}
      value={name} 
      onChange={(event) =>
        setValueName(event.target.value)
      }
  />
user_59390580

Use value={name} if you want the state to be shown inside the input field. Also I noticed that setValueName() is not defined anywhere, replace that with setName().

Maybe you want to change the value of the input field to Max if the input field is empty when the user clicks the back button. In this case you should check if the input is not empty before setting a default name.

const Profile = () => {

  const [name, setName] = useState('');
  const onClickBack = () => {
    if (name !== '') {
      setName('Max');
    }
  }


  return ( 
    <div>
      <div className = "form-group">
        <div className = "col-xs-4">
          <label for="exampleInputName" value='Name'/> 
          <input type = "text"
            className = {
              name ? "form-control" : "form-control is-invalid"
           }
           placeholder={'Your name'}
           onChange = {
             event => setName(event.target.value)
           }
           value={name}                   
         />
       </div> 
     </div> 
     <button 
       type = "button"
       id = "submit"
       name = "submit"
       className="btn btn-primary submit-button ml-5"
       onClick={onClickBack}
     >Back</button>
    </div>
  );
};

export default Profile;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

user_120666770

You used input wrong.

<input
  type="text"
  className={name ? "form-control" : "form-control is-invalid"
  }
  placeholder={name}
  value={name}
  onChange={(event) =>
    setName(event.target.value)
  }
/>
Admin1
Related